Vue-cli 3环境变量均未定义

Question

我已经尝试了所有解决方案，但似乎没有一种适合我。我只想将一些值存储.env在Vue应用程序内的文件中，但仅尝试记录即可process.env从组件内部返回一个空对象。

我的.env档案

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

我的计划是将这些环境变量设置为数据属性，但它总是返回undefined。如果我console.log(process.env.NODE_ENV)从webpack.config.js中进行操作，它将显示我正在开发中，但是如果我尝试从类似组件的内部进行操作，

mounted() {
    this.$nextTick(() => {
      console.log(process.env.VUE_APP_URL);
    })
  }

它只是返回undefined。

Answer 1

给在这里登陆的人的一些提示：

Answer 2

所以我使用 VUE_APP_API_URL（这不起作用）然后我将其更改为 VUE_APP_APIURL（这有效）

希望能帮助到你

Answer 3

我知道这个问题是关于vue-cli3 的，它会生成 Vue 2 的代码。但如果你在 google 上搜索“vue3 does not embed env”和类似的查询，它就是最重要的结果，所以我假设很多人最终都会在这里process.env在 Vue 3 应用程序中遇到变量未定义的问题。

这是关于如何解决 Vue 3 环境问题的答案。

这就是造成混乱的原因

如果你用 google 搜索 vue 的环境问题，你最终会找到vue-cli文档。但在 Vue 3 中vue-cli被替换。create-vue页面顶部有一个警告框告诉你这一点，但你可能错过了它。
如果您没有错过它并点击框中的两个链接之一，您最终会进入 Vue 3 工具指南或存储库create-vue。这些资源都没有提到环境变量。但你了解到那create-vue是基于Vite的。
如果您按照该线索并谷歌搜索“vite env”，您最终会在vite文档中找到答案：
- env 变量必须带有前缀VITE_才能编译到应用程序中（而不是VUE_APP_in vue 2）
- env 变量将在您的应用程序中可用import.meta.env（而不是process.env在vue 2）

后一个是我花了最长的时间才弄清楚的。

这就是你需要这样做的方式

在.env项目根目录的文件中：

VITE_MY_ENV_VAR=foo

该文档还将告诉您 Vite 中 .env 文件的不同命名模式。如果您在不同的环境中工作，非常有用的信息！

在你的应用程序中：

const my_env_var = import.meta.env.VITE_MY_ENV_VAR

我希望这可以节省人们解决这个问题的时间。

Answer 4

如果您的vue-cli 版本高于3.x，并且将.env文件放在根目录中，如注释中所述。比起您可以从组件中访问环境变量（例如process.env.VUE_APP_YOUR_VARIABLE）。如vue-cli文档中所述

只有以开头的变量VUE_APP_将通过静态嵌入客户端捆绑包中webpack.DefinePlugin。您可以在应用程序代码中访问它们：console.log(process.env.VUE_APP_SECRET)

Answer 5

我知道了-我不得不dotenv-webpack在webpack.config.js中安装并初始化它，这很奇怪，因为没有文档说明我需要这样做。

如果有人像我一样愚蠢，我错过了文件应该以 .env 开头的事实（例如，只有文件名 .env）。相反，我使用了 myconfig.env 文件，这是错误的。所以在我用 cli 3.x 构建的 vue 应用程序中，它无需任何 dotenv.config 或类似的东西即可工作 (4认同)
谢谢。我已经寻找解决方案几个小时了。这很奇怪，因为主机和端口在 config/index.js 中被一个简单的 ```require('dotenv').config();``` 覆盖。我绝不会想到我需要任何额外的东西来使用 Vue 组件中的变量。 (2认同)
我搜索了很多，但这是我尝试过的唯一可以在没有 vue-cli 的情况下使用 webpack 的解决方案。这对我来说很有效。 (2认同)

Answer 6

安装dotenv-webpack和配置vue.config.js文件如下。

npm install dotenv-webpack --save-dev

将此添加到您的配置文件中：

const Dotenv = require('dotenv-webpack');


module.exports = {
  configureWebpack: {
    plugins: [
      new Dotenv()
    ]
  }
}

在您的.env文件中，请确保VUE_APP_在您的变量之前添加如下：

VUE_APP_VAR1=example
VUE_APP_VAR2=value

现在您可以在 Vue 应用程序中访问这些变量：

VUE_APP_VAR1=example
VUE_APP_VAR2=value

这里有一些链接供参考：