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_VAR 的值未定义

Answer 1

来自文档：

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

所以你需要在你的变量中添加VUE_APP_前缀。