如何在 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.... app 开始工作，所以我猜问题在于读取 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'
       }
  }
}

Answer 1

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

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

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

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

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

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

privateRuntimeConfig 的一个流行用例是将其用于nuxtServerInit 或在构建过程中（yarn build 或 yarn generate）使用无头 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

有时，the syntax may differ a bit，在这种情况下，请参阅您的 Nuxt 模块文档。

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

---

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

Nuxt3 更新

如here 所述，您可以将以下内容用于 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>

Answer 2

这很容易。给你一个 axios/nuxt 的例子

1. 在.env 文件中定义您的变量：

   baseUrl=http://localhost:1337

2. 在 env-object 中的 nuxt.config.js 中添加变量（并在 axios 配置中使用）：

   export default {env: {baseUrl: process.env.baseUrl},axios: {baseURL: process.env.baseUrl},}

3. 在任何文件中使用 env 变量，如下所示：

   console.log(process.env.baseUrl)

注意 console.log(process.env) 将输出 {} 但 console.log(process.env.baseUrl) 将还是输出你的价值！

Answer 3

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

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

然后在你的插件中：

const myVar = process.env.myVariable