时间戳

首页 > 解决方案 > 当我使用 env 文件时，当我阅读 vars 时我得到了未定义

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

问题描述

vue/cli我使用:创建了一个 Vue 应用程序vue create my-vue。我想在next模式下构建这个项目（比如qa, stage, next...），所以我按照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？

标签： javascriptvue.jsvue-cli

解决方案

如您链接的文档中所述：

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

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

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

推荐阅读