如何在 Nuxt 2 或 3 中使用 .env 变量？

Question

我的项目根目录中有 .env 文件，在我的 nuxt 配置中，我使用变量来配置 ReCaptcha，如下所示：

import dotenv from 'dotenv'
dotenv.config()

export default {
    modules: [
        ['@nuxtjs/recaptcha', {
          siteKey: process.env.RECAPTCHA_SITE_KEY,
          version: 3,
          size: 'compact'
        }],
    ]
}

在 .env 中像这样：

RECAPTCHA_SITE_KEY=6L....

但应用程序总是失败并出现控制台日志错误：

ReCaptcha 错误：未提供密钥

当我像这样直接硬编码 ReCaptcha 密钥时：siteKey: 6L....应用程序开始工作，所以我猜问题在于读取 nuxt.config 中的 .env props

你知道如何解决它吗？

编辑：我尝试通过@kissu推荐和我在这里找到的示例更新我的nuxt.config： https: //www.npmjs.com/package/@nuxtjs/recaptcha

所以有新的 nuxt.config 也不起作用：

export default {
    modules: [
       '@nuxtjs/recaptcha',
    ],
    publicRuntimeConfig: {
       recaptcha: {
         siteKey: process.env.RECAPTCHA_SITE_KEY,
         version: 3,
         size: 'compact'
       }
  }
}

Answer 1

该视频以视频格式进行了很好的解释，其中包含一些我当时不知道的最新信息。很快就会相应地更新我的答案以修复一些错误。

如果您的 Nuxt 版本是2.13 或更高版本，您不需要使用@nuxtjs/dotenv或类似的东西，因为它已经备份到框架中。

要使用某些变量，您需要有一个.env在项目的根目录下有一个文件。git 应该忽略这一点。然后你可以在那里输入一些键，例如

PUBLIC_VARIABLE="https://my-cool-website.com"
PRIVATE_TOKEN="1234qwer"

在您的 中nuxt.config.js，您必须将它们输入到 2 个对象中，具体取决于您的用例，publicRuntimeConfig或者privateRuntimeConfig：

PUBLIC_VARIABLE="https://my-cool-website.com"
PRIVATE_TOKEN="1234qwer"

差异：publicRuntimeConfig基本上可以在任何地方使用，而privateRuntimeConfig只能在SSR期间使用（密钥只有在不传送到浏览器时才能保持私有）。

一个流行的用例privateRuntimeConfig是将其用于nuxtServerInit在构建过程中或在构建过程中yarn build（或yarn generate）以使用无头 CMS 的 API 调用填充应用程序。

更多信息可以在这篇博文中找到： https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/

• 然后，您将能够.vue直接将其访问到任何文件中

export default {
  publicRuntimeConfig: {
    myPublicVariable: process.env.PUBLIC_VARIABLE,
  },
  privateRuntimeConfig: {
    myPrivateToken: process.env.PRIVATE_TOKEN
  }
}

• /plugins您也可以使用以下语法将其访问到 Nuxt 中

this.$config.myPublicVariable

• 如果您的 Nuxt 模块或文件中的任何键需要此变量nuxt.config.js，请直接使用

process.env.PRIVATE_TOKEN

有时，语法可能会有所不同，在这种情况下，请参阅 Nuxt 模块文档。

export default ({ $axios, $config: { myPublicVariable } }) => {
  $axios.defaults.baseURL = myPublicVariable
}

PS：如果您确实使用target: server（默认值），您可以yarn build将yarn start您的应用程序部署到生产环境。然后，更改您想要的任何环境变量yarn start。无需重建。因此得名RuntimeConfig！

Nuxt3更新

正如文档中提到的，您可以将以下内容用于 Nuxt3

nuxt.config.js

process.env.PRIVATE_TOKEN

在任何组件中

// for @nuxtjs/gtm
publicRuntimeConfig: {
  gtm: {
    id: process.env.GOOGLE_TAG_MANAGER_ID
  }
},

/composables/test.js在像这样的可组合项中

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      secret: process.env.SECRET,
    }
  }
}

这是该部分的官方文档。

Answer 2

您还可以将该env属性与 Nuxt nuxt.config.js 一起使用：

export default {
  // Environment variables
  env: {
    myVariable: process.env.NUXT_ENV_MY_VAR
  },
  ...
}

然后在你的插件中：

const myVar = process.env.myVariable

Answer 3

这很奇怪，因为我们无法process.env在 Nuxt 3 中访问

\n

在 Nuxt 3 中，我们被邀请使用运行时配置，但这并不总是很方便，因为需要 Nuxt 应用程序上下文。

\n

但在我们有一些普通库的情况下，我们不想将其包装在插件或可组合函数中，通过 vite / webpack 声明全局变量是最好的：

\n

// nuxt.config.ts\nexport default defineNuxtConfig({\n  vite: {\n    define: {\n      MY_API_URL: JSON.stringify(process.env.MY_API_URL)\n    }\n  }\n})\n

\n

然后你就可以在任何文件中使用，而无需手鼓跳舞：

\n

// nuxt.config.ts\nexport default defineNuxtConfig({\n  vite: {\n    define: {\n      MY_API_URL: JSON.stringify(process.env.MY_API_URL)\n    }\n  }\n})\n

\n

如果您想像以前一样使用一些环境变量，请定义完整限定名称：

\n

// nuxt.config.ts\nexport default defineNuxtConfig({\n  vite: {\n    define: {\n      // dont forgot about JSON.stringify, because it adds quotes\n      \'process.env.APP_URL\': JSON.stringify(process.env.APP_URL)\n      // for example\n      \'process.env.APP_URL\': \'"https://myawesomesite.com"\'\n    }\n  }\n})\n

\n

然后在您的代码中使用它：

\n

// some-file.ts\nconsole.log(\'global var:\', MY_API_URL) // replaced by vite/webpack in real value\n

\n

在浏览器源中检查此代码，您将看到：

\n

// nuxt.config.ts\nexport default defineNuxtConfig({\n  vite: {\n    define: {\n      // dont forgot about JSON.stringify, because it adds quotes\n      \'process.env.APP_URL\': JSON.stringify(process.env.APP_URL)\n      // for example\n      \'process.env.APP_URL\': \'"https://myawesomesite.com"\'\n    }\n  }\n})\n

\n

这意味着定义在中的任何变量vite.define只是编译时替换的模式。

\n