文章背景
开发过程中经常遇到这样的问题:
相同的代码部署到不同环境时需要使用不同的变量:
比如接口域名变量”SERVE”,在测试环境和生产环境使用的是不同的域名。
这种情况下如果在代码里定义变量,打包部署前再修改代码切换成不同的值再打包不利于代码的维护,也很繁琐。
这时候利用环境变量来实现,在不用每次打包前改变变量的情况下,通过不同的打包命令在代码中使用不同的域名,或者其他自定义变量。
概念简介
1、环境变量使用方法
process.env.[变量名]
vue项目默认有两个环境变量process.env.NODE_ENV和process.env.BASE_URL
我们可以在项目根目录下的.env配置文件(如果没有该文件,自己创建一个)中增加自定义环境变量,变量名必须以VUE_APP_开头
.env配置文件中的环境变量在所有模式下可用,我们要在指定模式下增加环境变量,需要在根目录下创建.env.[模式名称]文件,例如.env.buildTest文件中定义的环境变量只在buildTest模式下生效
环境变量定义方式是用等号连接的键值对:
例:
NODE_ENV=production
VUE_APP_SERVE=https://xxxtest.com
这里需要注意一下,NODE_ENV用来识别当前打包环境的
2、如何构建不同模式的工程
在package.Json中增加如下代码
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service build --mode buildTest", "lint": "vue-cli-service lint"}
然后执行npm run test就可以构建buildTest模式下的工程了
具体实现
1、在根目录下创建不同模式的配置文件
比如有test和uat两套环境,配置文件如下
.env.buildTest中增加如下配置
VUE_APP_SERVE=https://xxxtest.com
.env.uat中增加如下配置
VUE_APP_SERVE=https://xxxuat.com
2、package.json中的scripts配置项增加以下配置
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "vue-cli-service build --mode buildTest", "uat": "vue-cli-service build --mode buildUat", "lint": "vue-cli-service lint"}
代码中使用环境变量
console.log(process.env.VUE_APP_ SERVE)
构建版本
test环境通过npm run test命令构建
uat环境通过npm run uat命令构建
环境变量和模式更多用法参考vue官网
https://cli.vuejs.org/zh/guide/mode-and-env.html