一. 配置环境变量
- 变量必须以 VUE_APP_ 开头, 才能被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。如VUE_APP_XXX ;
- 不同的环境变量配置
// .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"
},
- 只要修改了webpack相关的东西就得重新打包才能生效
二. 使用环境变量
- js 中用 process.env.{环境变量名},如 process.env.VUE_APP_UR。
- html 采用模板引用指令<%= process.env.process.env.{环境变量名} %>,比如:
<script src="xxx.com" app_id="<%= process.env.process.env.VUE_APP_URL %>"/>
注:
若 process.env.VUE_APP_URL报错undefined, 则可能修改了环境变量而未重新打包