vue-cli-service build 不同环境配置

背景

在项目部署时，我们需要在测试环境和生产环境使用不同的变量。
vue-cli提供了vue-cli-service build打包命令，然而vue-cli-service build默认的环境变量值则为production。

环境变量

在src同级目录下创建以下文件名的文件并进行内容配置

.env.development 开发环境

// 环境变量
NODE_ENV=development
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV_NAME = 'development'

.env.test 测试环境 

// 环境变量（这里的环境变量是跟打包有关的，production则会进行压缩代码等，真正跟每个环境有关的变量是下面以VUE_APP开头的变量）
NODE_ENV=production
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV_NAME = 'test'

 .env.production 线上环境

// 环境变量
NODE_ENV=production
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV_NAME = 'production'

配置模式

部署时，构建打包执行npm run build，则会执行vue-cli-service build，默认模式为production，对应.env.production文件，取此文件中的环境变量。

想要配置测试环境，需要在scripts下增加脚本：

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

 测试环境打包构建时，执行npm run build-test就可以了。

这是我本人在工作学习中做的一些总结，同时也分享出来给需要的小伙伴哈 ~ 供参考学习，有什么建议也欢迎评论留言，转载请注明出处哈，感谢支持！