如何访问 Nuxt 2 或 3 项目中的环境变量？

在 Nuxt 2 或 3 中访问环境变量：.env 变得简单

在 Nuxt 项目中使用环境变量时，无论是 Nuxt 2 还是3、了解正确的方法很重要。在本文中，我们将探讨如何在 Nuxt 配置中从 .env 文件中读取环境变量。

在 Nuxt 2.13 或更高版本中，不再需要使用 @nuxtjs/dotenv，因为框架本身支持环境变量。要定义变量，请在项目的根目录创建一个 .env 文件，并用键值对填充它。

Nuxt 2.13 或更高版本

在您的 nuxt 中.config.js，使用 publicRuntimeConfig 或 privateRuntimeConfig 定义环境变量，具体取决于其预期

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

Nuxt 3

Nuxt 3 在 nuxt.config.js 中引入了 runtimeConfig 对象。在此处定义环境变量：

import { defineNuxtConfig } from 'nuxt3';

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

要在组件中访问这些变量，请在 Nuxt 2 中使用 this.$config ，在 Nuxt 3 中使用 useRuntimeConfig()。

访问环境Nuxt.config中的变量

对于Nuxt.config，可以直接访问环境变量using process.env.VARIABLE_NAME.

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

通过执行以下步骤，您可以在 Nuxt 项目中无缝利用环境变量。请注意，根据您使用的 Nuxt 包，语法可能会略有不同。具体指导请参考官方文档。

以上是如何访问 Nuxt 2 或 3 项目中的环境变量？的详细内容。更多信息请关注PHP中文网其他相关文章！