一个 Vue 项目，对于不同的生产环境，可能需要不同的构建

区分开发环境和生产环境

如果是针于 dev/prod 环境的配置，我们直接更新 vue.config.js 即可

例如 我们想在 dev 和 prod 下使用不同的 publicPath ：

1
2
3

module.exports = {
  publicPath: process.env.NODE_ENV === 'development' ? 'xxx' : 'xxxx'
}

上述代码中，通过对环境变量的判断，实现了不同环境使用不同 publicPath 的效果

生产环境有多个版本怎么办？

比如说，项目有海外版和国内版，两个版本同属生产环境，怎么搞

Vue CLI 里有个模式的概念

可以对不同的模式，配置不同的环境变量

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。

不同版本的 .env 文件就可以写成 .env.versionA .env.versionB

文件内是对于环境变量的定义：

1
2

PUBLIC_PATH=//xxx.xxx.xxx
NODE_ENV=production

这样一来，只要在 buid 脚本中配置相应的 –mode 参数，就可以实现不同版本拥有不同环境变量的效果

package.json：

1
2
3
4
5
6

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dongdong": "vue-cli-service build --mode dongdong",
    "build:pacer": "vue-cli-service build --mode pacer"
  }

更多请查看 Vue CLI 环境变量和模式