vue项目配置环境变量

由于公司项目需要分别部署到测试、uat以及生产环境上，但是对于同一个变量，在不同的环境测试下，需要取不同的值，所以就考虑配置环境变量去处理这个问题。

一、在项目根目录下创建是三个文件，.env.dev(测试环境)、.env.uat(uat环境)、.env.prod（生产环境）。

//.env.uat 文件
NODE_ENV = production
VUE_APP_HUANJING = "uat" 

　　注：VUE_APP_自定义，自定义环境变零。通过process.env.VUE_APP_自定义取值

//.env.prod文件
NODE_ENV = production
VUE_APP_HUANJING = "prod"

//.env.dev文件
NODE_ENV = production
VUE_APP_HUANJING = "test"

二、配置过三个文件之后，配置package.json文件

"scripts": {
        "serve": "vue-cli-service serve",
        "lint": "vue-cli-service lint",
        "build": "cross-env NODE_ENV=production vue-cli-service build --mode prod",
        "uat": "cross-env NODE_ENV=production vue-cli-service build --mode uat",
        "test": "cross-env NODE_ENV=production vue-cli-service build --mode dev"
    },

注：需要安装cross-env模块

环境变量和模式官方参考链接：https://cli.vuejs.org/zh/guide/mode-and-env.html