vue cli多环境配置

axios多环境配置

Vue cli模式和环境变量

单个字段多环境配置

1. 模式

development: vue-cli-service serve

production: vue-cli-service build

2. 环境变量文件

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

3. 环境变量文件(.env.staging)

根目录创建.env.staging 文件

NODE_ENV=development
VUE_APP_TITLE=My App (staging)

NODE_ENV 设置为开发模式， package.json 使用vue-cli-service serve

package.json ，执行staging文件环境变量

"servetest": "vue-cli-service serve --mode staging"

加载可能存在的 .env,.env.staging 和 .env.staging.local 文件的环境变量,然后开发环境运行

4. 使用环境变量

process.env.VUE_APP_TITLE

可以在代码中使用和 vue.config.js 配置文件中使用

文件多环境配置

1. 配置书写多环境文件
2. .gitlab-ci.yml 注释不同内容，加载不同文件 cp 复制文件

job-build:
 stage: build
 before_script:
 - cp config/test.js config/production.js

3. 解析文件 根据环境 判断加载不同的文件

if (process.env.NODE_ENV == 'development') {
  path.join(__dirname, `config/development.js`)
} else {
  path.join(__dirname, `config/production.js`)
}