如何在 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 道具

你知道如何解决吗？

编辑：我尝试通过@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'
       }
  }
}

原文由 Denis Stephanov 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 :1c—

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

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

A popular use case for the privateRuntimeConfig is to use it for nuxtServerInit or during the build process (either yarn build or yarn generate ) to populate具有无头 CMS API 调用的应用程序。

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

---

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

this.$config.myPublicVariable

• 您也可以使用此语法将它访问到 Nuxt 的 /plugins

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

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

process.env.PRIVATE_TOKEN

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

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

---

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

Nuxt3更新

如此 处 所述，您可以将以下内容用于 Nuxt3

nuxt.config.js

 import { defineNuxtConfig } from 'nuxt3'

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

在任何组件中

<script setup lang="ts">
  const config = useRuntimeConfig()
  config.secret
</script>

在类似 /composables/test.js 的可组合项中，如 本评论 所示

export default () => {
  const config = useRuntimeConfig()
  console.log(config.secret)
}

---

这是该部分的 官方文档。

原文由 kissu 发布，翻译遵循 CC BY-SA 4.0 许可协议