根据不同环境构建 Vue 项目

一个 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 环境变量和模式

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2019/09/24/config-vue-cli-env/

版权声明: 转载请注明出处

为您推荐

体验小程序「简易记账」

关注公众号「特想学英语」

Vue CLI 项目,如何在浏览器端使用环境变量