vue - 环境变量和模式

1.在项目根目录中创建.env 或者 .env.xxx 的文件来指定环境变量

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
.env.dev            # 指定开发模式dev
.env.prod           # 指定生产模式prod
.env.test           # 指定测试模式test

注：以.local结束的文件会被忽略，是因为忽略文件.gitignore文件设置了

.env.local
.env.*.local

2.环境文件的优先级

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。

不会被 .env 文件覆写。

3.一个环境文件只包含环境变量的“键=值”对

例如：.env.test文件的配置可如下

# 环境
NODE_ENV = 'test'
# 接口地址
VUE_APP_BASE_API = '/api'
# 打包文件名
VUE_APP_DIR_NAME = 'test'

4.模式

（1）模式与环境变量是和关系？

　　模式！= 环境变量

　　一个模式可以包含多个环境变量

（2）模式如何添加呢？

　　.env 文件增加后缀来设置某个模式

如.env.test文件的后缀名是test,即为test模式 。  test模式下含有NODE_ENV ，VUE_APP_BASE_API ，VUE_APP_DIR_NAME 这3个环境变量，如有需要，可自行添加其他环境变量

5.使用

（1）构建命令中使用开发环境变量

　　通过传递 --mode 选项参数为命令行覆写默认的模式。

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode build",
    "dev": "vue-cli-service serve --mode dev",    
    "test": "vue-cli-service build --mode test"   
  },

注：--mode 后面跟的名字一定要跟 .env.xxx 的名字对应起来才能实现不同的命令用不同的配置文件

（2）客户端代码中使用

const instance = axios.create();

// instance.defaults.baseURL = baseurl;
instance.defaults.baseURL = process.env.VUE_APP_BASE_API;
instance.defaults.timeout = 2000;

 

//设置打包后的目录名  
outputDir:process.env.VUE_APP_DIR_NAME,