Vue环境变量配置与使用

一. 配置环境变量

1. 变量必须以 VUE_APP_ 开头, 才能被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。如VUE_APP_XXX ;
2. 不同的环境变量配置

 // .env.development / .env.production / .env.test  
 ENV = 'development' / 'production' / 'test'
 VUE_APP_IMG_URL = '/dlkjj_pc/static/img'
 
 // package.json  
 // --mode xxx 与 .env.xxx 名称对应
 // 根据启动命令加载 .env.xxx
"scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "build:test": "vue-cli-service build --mode test"
},

3. 只要修改了webpack相关的东西就得重新打包才能生效

二. 使用环境变量

1. js 中用 process.env.{环境变量名}，如 process.env.VUE_APP_UR。
2. html 采用模板引用指令<%= process.env.process.env.{环境变量名} %>，比如：

 <script src="xxx.com" app_id="<%= process.env.process.env.VUE_APP_URL %>"/>

注:
若 process.env.VUE_APP_URL报错undefined, 则可能修改了环境变量而未重新打包