vue.js 如何在Nuxt 2或3中使用.env变量?

zvokhttg  于 2023-01-17  发布在  Vue.js
关注(0)|答案(6)|浏览(398)

我在项目根目录下有.env文件,在我的nuxt config中,我使用变量来配置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密钥时:siteKey: 6L....应用程序开始工作,所以我猜问题是在nuxt.config中阅读.env属性
你知道怎么修吗?
编辑:我尝试更新我的nuxt.config @kissu建议和例子,我发现在这里: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'
       }
  }
}
2uluyalo

2uluyalo1#

这非常简单。给你一个axios/nuxt的例子
1.在.env文件中定义变量:
baseUrl=http://localhost:1337
1.在env-object的nuxt.config.js中添加变量(并在axios配置中使用它):
export default {env: {baseUrl: process.env.baseUrl},axios: {baseURL: process.env.baseUrl},}
1.在任何文件中使用env变量,如下所示:
console.log(process.env.baseUrl)

注意****console.log(process.env)将输出{},但console.log(process.env.baseUrl)**仍将输出您的值!

sirbozc5

sirbozc52#

对于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:非常重要,否则无法读取,并给出未定义的错误。

klsxnrf1

klsxnrf13#

对于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
  }
}

你也可以使用env变量来初始化runtimeConfig,但是它是在构建之后writted static的。但是你可以在运行时使用下面的env变量覆盖这个值:

NUXT_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC

如果需要在客户端使用config,则需要使用public属性。

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

注意env变量中的PUBLIC部分:

NUXT_PUBLIC_RECAPTCHA_SITE_KEY=SOMETHING DYNAMIC
dzhpxtsq

dzhpxtsq4#

这非常奇怪,因为我们无法在Nuxt 3中访问process.env
在Nuxt 3中,我们被邀请使用运行时配置,但这并不总是方便的,因为需要Nuxt应用程序上下文。
但是在我们有一些普通库的情况下,我们不想用插件或可组合函数来 Package 它,通过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
juud5qan

juud5qan5#

如果您的Nuxt版本是2.13或更高,您需要使用@nuxtjs/dotenv或类似的东西,因为它已经备份到框架中。
要使用一些变量,你需要在项目的根目录下有一个.env文件,这个文件应该被git忽略,然后你可以在那里输入一些键,比如

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

在您的nuxt.config.js中,您必须将它们输入到2个对象中,具体取决于您的用例,publicRuntimeConfigprivateRuntimeConfig

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

差异publicRuntimeConfig基本上可以在任何地方使用,而privateRuntimeConfig只能在SSR期间使用(密钥只有在没有被发送到浏览器的情况下才能保持私有)。

privateRuntimeConfig的一个常见用例是将其用于nuxtServerInit或在构建过程中(yarn buildyarn generate),以使用headless 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 buildyarn start将你的应用部署到生产环境中。然后,根据你的需要更改任何环境变量,并再次使用yarn start。这样就不需要重新构建了。因此命名为 RuntimeConfig

Nuxt 3更新

正如这里和文档中所提到的,您可以对Nuxt 3使用以下代码
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)
}

这是这部分的官方文档。

eeq64g8w

eeq64g8w6#

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

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

然后在插件中:

const myVar = process.env.myVariable

相关问题