Question

我使用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 var？

Answer 1

如您所链接的文档中所述：

请注意，只有NODE_ENV，BASE_URL和以VUE_APP_开头的变量会被静态嵌入到 client bundle 与webpack.DefinePlugin。这是为了避免在机器上意外公开可能具有相同名称的私钥。

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

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

当我使用env文件时，我在读取vars时不确定

1 个答案: