Vue Cli 3 环境变量变成 Undefined 的问题以及解决方案

一、问题

在Vue项目中.env文件里定义的环境变量，在 vue 工程中读取出来是 undefined值？

二、原因

这是由于Vue Cli 3 对环境变量的加载做了一些规定和变动，具体请阅读下面的参考文档。

三、解决方案

1. 在.env文件中定义环境变量。
2. 以VUE_APP_开头命名环境变量。这是因为，只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。
3. 在开发模式下，如果环境变量不起作用，请重新启动一下开发服务器，保证环境变量有效。

四、参考文档

1. 环境变量和模式
2. Vue-cli 3 Environment Variables all undefined