Vue js 项目未加载 .env 变量

Question

我正在做一个 Vue JS 项目。我在项目的根目录中创建了一个 .env 文件。我做了3个变量。这是我的 .env 的内容：

API_BASE_URL=http://x.x.x.x:yyyy/myproject
VUE_APP_TITLE=My App
VUE_MY_VAR=My Var

我将日志放在在 beforeMount() 方法中启动时加载的组件中，如下所示：

beforeMount() {
            console.log('base url: ' + process.env.API_BASE_URL);
            console.log('base url: ' + process.env.VUE_APP_TITLE);
            console.log('base url: ' + process.env.VUE_MY_VAR);
        }

当我使用运行开发服务器时，vue-cli-service serve我看到以下控制台输出：

base url: undefined
base url: My App
base url: undefined

我的问题是：为什么 API_BASE_URL和VUE_MY_VARundefined的值

Answer 1

来自文档：

请注意，只有 NODE_ENV、BASE_URL 和以 VUE_APP_ 开头的变量才会通过 webpack.DefinePlugin 静态嵌入到客户端包中。这是为了避免意外暴露机器上可能具有相同名称的私钥。

因此，您需要为VUE_APP_变量添加前缀。