vue利用环境变量和模式实现不同部署环境下使用不同的变量值

文章背景

开发过程中经常遇到这种情况：
相同的代码部署到不同环境时，需要使用不同的变量。例如：参数加密使用的秘钥SECRET_KEY，在测试环境和生产环境下一般都是不同的秘钥。
这种情况如果直接在项目代码中使用变量定义，在打包部署之前就需要根据环境切换成不同的值，再打包，不利于代码的维护。
这种情况可以利用环境变量和模式来实现，在不用每次打包前改变量的情况下，通过不同的打包命令在代码中使用不同的环境变量。

概念简介

1.环境变量使用方法

process.env.[变量名]
vue项目默认有两个环境变量process.env.NODE_ENV和process.env.BASE_URL
我们可以在项目根目录下的.env配置文件(如果没有该文件，自己创建一个)中增加自定义环境变量，变量名必须以VUE_APP_开头
.env配置文件中的环境变量在所有模式下可用，我们要在指定模式下增加环境变量，需要在根目录下创建.env.[模式名称]文件，例如.env.sit文件中定义的环境变量只在sit模式下生效
环境变量定义方式是用等号连接的键值对

	VUE_APP_SECRET_KEY=123456

2.如何构建不同模式工程

在package.json中增加如下代码

	"scripts": {