文章背景

开发过程中经常遇到这样的问题：

相同的代码部署到不同环境时需要使用不同的变量：

比如接口域名变量”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