关于vue-cli3使用cross-env进行多环境打包的坑

1. .env 环境文件名容易写错

请检查是否将 .env.prod 错写成 .prod.env

2. package.json 容易混淆

请检查命令是否与环境匹配. 例如构建一个staging打包环境, 在不通环境下的脚本是不一样的

webpack
"staging": "cross-env NODE_ENV=staging webpack --config build/webpack.config.js"

vue-cli2
"staging": "cross-env NODE_ENV=staging node build/build.js"

vue-cli3
"staging": "vue-cli-service build --mode staging",

3. 环境文件.env的问题

在vue-cli3中, 容易忽略.env文件命名问题, 多个.env的环境变量容易合并在一起.

例如项目中包含.env.staging, .env.title两个环境文件

# .env.staging
NODE_ENV=staging
VUE_APP_CONTENT='Staging content'

# .env.title
VUE_APP_TITLE='My app title'

// @/main.js

// 其他代码
console.log('env: ', process.env)

当执行 npm run staging后控制台输出

// 说明所有`.env`文件都被注入了
env: {
  BASE_URL: ""
  NODE_ENV: "staging"
  VUE_APP_CONTENT: "Staging content"
  VUE_APP_TITLE: "My app title"
}

结: 后续根据自己的业务需求, 取里面的变量来使用即可.