VUE CLI环境变量采坑

环境变量配置

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.{环境变量名} %>，比如