在 nuxt.config.js 中使用环境变量

Posted 2023-02-22

【中文标题】在 nuxt.config.js 中使用环境变量

【英文标题】：Using Environment Variables in nuxt.config.js

【发布时间】：2020-05-15 08:12:04

【问题描述】：

我正在使用 Nuxt 和 Axios，但在从我的本地计算机构建应用程序时使用环境变量时遇到问题。

我已安装 @nuxtjs/dotenv 模块以尝试解决此问题，但仍有问题。

注意：在我的托管服务提供商环境中构建应用程序时，环境变量可以正常工作。它只是从我的本地机器上构建的，这给我带来了麻烦。我的 IDE 是 VS Code。

这是我在 nuxt.config.js 中的 axios 设置：

module.exports = 
  ...
  buildModules: [
    '@nuxtjs/dotenv'
  ],
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  axios: 
    baseURL: process.env.BASE_URL
  ,
  ...

我的 .env 文件有以下内容：

BASE_URL="https://some.api.com"

构建应用程序时无法识别 .env 变量：

nuxt build

相反，它只是将 axios 基本 url 设置为服务器默认运行的相同主机：端口。例如：本地主机：4000

我从@nuxtjs/dotenv 模块中找到了以下文档：https://github.com/nuxt-community/dotenv-module#using-env-file-in-nuxtconfigjs。这指示您将以下内容添加到 nuxt.config.js 的顶部：

require('dotenv').config()

这适用于本地构建；我的 .env 变量被识别！但是，由于 dotenv 是一个开发依赖项，这会导致构建在部署到我的托管服务提供商时崩溃，因为无法识别该模块。

我知道我可以直接在构建命令中定义环境变量，如下所示，但我不希望这样做：

NUXT_ENV_BASE_URL=some.api.com nuxt build 

有没有一种简单的方法可以让环境变量在构建过程中在 nuxt.config.js 中本地工作，并且在部署到生产环境时也能正常工作？？

谢谢！

【问题讨论】：

您解决了这个问题吗？我也有同样的问题。

不，还没有。对不起

我在问这个问题后找到了一个可行的解决方案。我在下面添加了它。

【参考方案1】：

2020 年 9 月 26 日更新

从 2.13.0 开始，我删除了 @nuxtjs/dotenv。我的 nuxt.config.js 现在简单地读取如下，删除了 dotenv 导入。我没有对其他代码进行任何更改，其余功能对我来说完全相同。

env: 
  DB_HOST: process.env.DB_HOST
,

我的 .env 包含以下内容。

DB_HOST=http://localhost:5001/

原答案

我安装了以下作为开发依赖项； @nuxtjs/dotenv。然后我将以下内容添加到我的 nuxt.config.js 中。我找到了这个导入语句in an article 并尝试了它。谢天谢地，它对我有用。

import dotenv from "dotenv";
dotenv.config();

env: 
  DB_HOST: process.env.DB_HOST
,

我创建了一个名为 .env 的文件，内容如下

DB_HOST=http://localhost:5001/

【讨论】：

我昨天做了同样的事情，但没有成功。我今天做了，现在可以了。好吧。谢谢我猜。不确定这是否重要，但我的nuxt.config.js 中也有以下代码：buildModules: [ '@nuxtjs/dotenv' ] 最后一个是@nuxtjs/dotenv。我的版本是 ^2.15，但它确实有效，我不想碰它

【参考方案2】：

在 nuxt 版本 v2.13.0 中，添加了对 Runtime Config 的支持。这增加了对在运行时读取环境变量的适当支持。以前它们可以被读取但被编译到应用程序中。

标准文档非常好：https://nuxtjs.org/guide/runtime-config/。 还有一篇关于如何迁移的精彩博客文章。你删除了@nuxtjs/dotenv的使用。

https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

例如，在您的 nuxt.config.js 中，您定义。

  // Public env variables that are exposed on the frontend.
  publicRuntimeConfig: 
    someAccessKeyId: process.env.SOME_ACCESS_KEY_ID,
  ,
  // Private env variables that are not be exposed on the frontend.
  privateRuntimeConfig: ,

然后在您的 vue 代码中，您可以通过以下方式访问它。

const  someAccessKeyId  = this.$config

【讨论】：

你应该如何在 nuxt.config.js 文件中使用 RuntimeConfig？

这些只是nuxt.config.js 中的***键。正如我所提到的，您可以按照我使用this.$config 所描述的那样在代码中引用它们。

我不认为你理解@Derek，我想如何在nuxt.config.js 文件的另一部分访问someAccessKeyId

@Derek 我遇到了同样的问题，如果您在下面的模块对象中将它们称为 process.env，那么这些值就是空的

我们如何在插件中访问 privateRuntimeConfig 中的变量？