.env前端配置多环境打包

.env前端环境变量配置

参考资料：
https://www.cnblogs.com/xiaohouzi6/p/14445570.html
https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

---

项目有开发环境、测试环境、线上环境，里面的接口域名等是不同的。每次调试或者打包的时候手动改动各个变量，比较麻烦，也容易出错，所以用自动化方式直接配置的不同的环境变量。

文件配置

在项目根目录下添加文件，并配置变量

.env.dev（本地环境变量）

NODE_ENV = 'development'
VUE_APP_ENV_DESC = '测试环境'
VUE_APP_PUBLICPATH = ''
VUE_APP_HOST1 = 'http://dev.xxx.com'
VUE_APP_HOST2 = 'http://dev.xxx.com'

.env.prod（线上环境变量)

NODE_ENV = 'production'
VUE_APP_ENV_DESC = '生产环境'
VUE_APP_PUBLICPATH = ''
VUE_APP_HOST1 = 'http://dev.xxx.com'
VUE_APP_HOST2 = 'http://dev.xxx.com'

启动配置

在package.json中配置scripts

"scripts": {
    "serve:dev": "vue-cli-service serve --mode dev",
    "serve:prod": "vue-cli-service serve --mode prod",
    "build:dev": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build --mode prod"
  }

项目中使用

// 例如：获取文件中的变量
console.log(process.env.NODE_ENV)

运行打包

开发环境为例

npm run serve:dev  // 启动项目

npm run build:dev // 打包项目