.env环境变量

本文将对vuecli工程的env文件的实际使用作出说明

使用vuecli创建工程，新建相关env文件及统一配置config.js文件。工程目录结构如下：

script脚本

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

.env
默认配置

NODE_ENV = production
VUE_APP_ENV = ''

.env.development
使用npm run serve会合并.env文件，.env.development文件的配置

NODE_ENV = development
VUE_APP_ENV = 'serve'

.env.sit
使用npm run sit会合并.env文件，.env.sit文件配置

NODE_ENV = production
VUE_APP_ENV = sit

.env.uat
使用npm run uat会合并.env文件，.env.uat文件配置

NODE_ENV = production
VUE_APP_ENV = uat

.env.prod
使用npm run prod会合并.env文件，.env.prod文件配置

NODE_ENV = production
VUE_APP_ENV = prod

config.js
将各个环境的具体配置合并到config.js文件中统一管理，根据process.env.VUE_APP_ENV对应不同的环境配置。

const configs = {
    'dev':{baseUrl:'http://198.162.11.11:8080',dbUrl:'http://198.162.11.11:8081'},
    'sit':{baseUrl:'http://198.162.11.11:8080',dbUrl:'http://198.162.11.11:8081'},
    'uat':{baseUrl:'http://198.162.11.11:8080',dbUrl:'http://198.162.11.11:8081'},
    'prod':{baseUrl:'http://198.162.11.11:8080',dbUrl:'http://198.162.11.11:8081'},
    'serve':{baseUrl:'http://198.162.172.11:8080',dbUrl:'http://198.162.11.11:8081'}
}
//根据process.env.VUE_APP_ENV选择相应的配置
const config = configs[process.env.VUE_APP_ENV]
//导出对应的环境配置
export default config;

在外部使用相应的配置
例如在main.js文件导入config.js

import config from './config.js'
console.log(config);

变量命名规则
以VUE_APP_**的形式命名环境变量。
官网中提到：只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
想要弄明白需要从源码层面去分析，可以参考此博客：
https://blog.csdn.net/weixin_34185512/article/details/91367866

参考：
https://cli.vuejs.org/zh/guide/mode-and-env.html