当我使用 env 文件时，当我阅读 vars 时我得到了未定义答案

【问题标题】：When I use env files I got undefined when I read the vars当我使用 env 文件时，当我阅读 vars 时我得到了未定义
【发布时间】：2020-11-16 17:54:00
【问题描述】：

我使用 vue/cli: vue create my-vue 创建了一个 Vue 应用程序。我想在next模式下构建这个项目（比如qa，stage，next ...），所以我跟着steps in the Vue docs。我在根项目中创建了.env.next 文件，内容如下：

FOO=next

在我的main.js 中，我将其记录到控制台：

import Vue from 'vue'
import App from './App.vue'

console.log({ f: process.env.FOO }); // <----- undefined. why?
console.log({ f: process.env.VUE_APP_FOO }); // <----- undefined. why?

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

之后，我运行构建：

npm run build -- --mode next

当我在控制台中运行 dist 文件夹时，我得到undefined。我在捆绑包中搜索了“下一个”，但它不存在。

为什么？如何在构建输出中使用.env vars？

【问题讨论】：

标签： javascript vue.js vue-cli

【解决方案1】：

如您链接的文档中所述：

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

要使FOO 在构建输出中可用，请在您的.env 文件中将其重命名为VUE_APP_FOO，并相应地更新引用：

console.log({ f: process.env.VUE_APP_FOO })

【讨论】：