为什么我的 .env 变量在我的 Nuxt 应用程序中不起作用？

Nuxt 2 和 3 中的 .env 变量故障排除

问题陈述

Nuxt 应用程序在使用 .env 变量配置模块时可能会遇到错误，例如 ReCaptcha。尽管存在带有所需密钥的 .env 文件，控制台可能会显示“ReCaptcha 错误：未提供密钥”。

说明

在 Nuxt 2.13 及更高版本中，@nuxtjs/dotenv不再需要模块，因为运行时配置已内置到框架中。要使用 .env 变量，请按照以下步骤操作：

Nuxt 2.13

• 在项目根目录创建 .env 文件。

• 导入必要的变量进入nuxt.config.js:

  export default {
  publicRuntimeConfig: {
    recaptcha: {
      siteKey: process.env.RECAPTCHA_SITE_KEY,
      version: 3,
      size: 'compact'
    }
  }
  }

• 使用 this.$config 在组件中使用变量。

Nuxt 3

• 导入以下：

  import { defineNuxtConfig } from 'nuxt3'

• 在 nuxt.config.js 中使用以下内容：

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

• 使用组件中的变量useRuntimeConfig():

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

• 在可组合项中使用变量:

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

Nuxt 2 Pre-2.13

如果使用 Nuxt 2 2.13 之前的版本， @nuxtjs/dotenv 模块是必需的。您可以将此方法添加到 nuxt.config.js 文件中：

import dotenv from 'dotenv'
dotenv.config()

以上是为什么我的 .env 变量在我的 Nuxt 应用程序中不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！