环境变量配置
config目录下的*.env.js可以配置环境变量,编译过程中会自动载入对应模式下的环境变量。开发环境下(npm run dev)和正式部署环境下(npm run build),对应的环境变量配置文件分别是dev.env.js、prod.env.js。比如假设我们有个一个APP ID需要区分开发环境和正式部署环境,那么我们可以如下配置:
dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
MY_APP_ID: '"123456"'
})
prod.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
MY_APP_ID: '"123456"'
})
这里需要特别注意的点是环境变量的键值一定要用'""'来包括,千万不要只用"",不然会导致环境变量配置失败,导致环境变量永远是undefined。
环境变量使用
- 在js文件或者在vue文件中process.env.{环境变量名},比如上文定义的MY_APP_ID,使用process.env.MY_APP_ID即可获取环境变量的值。
- 在html文件中使用环境变量,采用模板引用指令<%= process.env.process.env.{环境变量名} %>,比如
<script src="xxx.com" app_id="<%= process.env.process.env.MY_APP_ID %>"/>