背景
在项目部署时,我们需要在测试环境和生产环境使用不同的变量。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就可以了
。
这是我本人在工作学习中做的一些总结,同时也分享出来给需要的小伙伴哈 ~ 供参考学习,有什么建议也欢迎评论留言,转载请注明出处哈,感谢支持!