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

问题描述 投票：0回答：7

我的项目根目录中有 .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'
       }
  }
}
javascript vue.js vuejs2 nuxt.js recaptcha
7个回答
68
投票

如果您的 Nuxt 版本是 2.13 或更高版本，您不需要需要使用

@nuxtjs/dotenv
或类似的东西，因为它已经备份到框架中。

要使用某些变量，您需要在项目的根目录下有一个 

.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

有时，语法可能略有不同，在这种情况下，请参阅您的 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({
  runtimeConfig: {
    public: {
      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)
}

这是该部分的官方文档。

6
投票

您还可以将 

env
属性与 Nuxt 一起使用 nuxt.config.js：

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

然后在你的插件中：

const myVar = process.env.myVariable
1
投票

这很容易。为您提供 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)仍会输出您的值！

1
投票

对于 v3，官方文档中有准确的描述

您在 nuxt.config.[ts,js] 中定义一个 runtimeConfig 条目，它用作初始/默认值：

export default defineNuxtConfig({
  runtimeConfig: {
    recaptchaSiteKey: 'default value' // This key is "private" and will only be available within server-side
  }
}

您还可以使用环境变量来初始化runtimeConfig，但它在构建后写入静态。 但是您可以使用以下环境变量在运行时覆盖该值：

NUXT_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC

如果需要在客户端使用配置，则需要使用公共属性。

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      recaptchaSiteKey: 'default value' // will be also exposed to the client-side
    }
  }
}

注意环境变量中的 PUBLIC 部分：

NUXT_PUBLIC_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC
1
投票

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

process.env

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

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

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

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

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

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

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

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

console.log(process.env.APP_URL)

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

console.log("https://myawesomesite.com")

这意味着在

vite.define
部分中定义的任何变量都只是编译时替换的模式。

0
投票

对于 nuxt3 rc11，在 nuxt.conf.ts 文件中：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      locale: {
        defaultLocale: process.env.NUXT_I18N_LOCALE,
        fallbackLocale: process.env.NUXT_I18N_FALLBACK_LOCALE,
      }
    }
  },
...

在 .env 文件中：

NUXT_I18N_LOCALE=tr
NUXT_I18N_FALLBACK_LOCALE=en

public：非常重要，否则无法读取并给出未定义的错误。

0
投票

对于 Nuxt 3，首先将你的环境放在 

runtimeConfig.public

下 
// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      HELLO: process.env.HELLO
    }
  },
  devtools: { enabled: true }
})

然后在您的 

.vue
文件中使用 useRuntimeConfig() 方法访问它。

<template>
  Hello {{useRuntimeConfig().public.HELLO}}.
</template>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.