本文将对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
