我在项目根目录下有.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'
}
}
}
6条答案
按热度按时间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)**仍将输出您的值!
sirbozc52#
对于nuxt3 rc11,在nuxt.conf.ts文件中:
在.env文件中:
public:非常重要,否则无法读取,并给出未定义的错误。
klsxnrf13#
对于v3,官方文档中有精确描述
您可以在 nuxt.config.[ts,js] 中定义一个runtimeConfig条目,作为初始/默认值:
你也可以使用env变量来初始化runtimeConfig,但是它是在构建之后writted static的。但是你可以在运行时使用下面的env变量覆盖这个值:
如果需要在客户端使用config,则需要使用public属性。
注意env变量中的PUBLIC部分:
dzhpxtsq4#
这非常奇怪,因为我们无法在Nuxt 3中访问
process.env
在Nuxt 3中,我们被邀请使用运行时配置,但这并不总是方便的,因为需要Nuxt应用程序上下文。
但是在我们有一些普通库的情况下,我们不想用插件或可组合函数来 Package 它,通过vite / webpack声明全局变量是最好的:
然后您可以在任何文件中使用,而无需使用手鼓:
juud5qan5#
如果您的Nuxt版本是2.13或更高,您不需要使用
@nuxtjs/dotenv
或类似的东西,因为它已经备份到框架中。要使用一些变量,你需要在项目的根目录下有一个
.env
文件,这个文件应该被git忽略,然后你可以在那里输入一些键,比如在您的
nuxt.config.js
中,您必须将它们输入到2个对象中,具体取决于您的用例,publicRuntimeConfig
或privateRuntimeConfig
:差异:
publicRuntimeConfig
基本上可以在任何地方使用,而privateRuntimeConfig
只能在SSR期间使用(密钥只有在没有被发送到浏览器的情况下才能保持私有)。privateRuntimeConfig
的一个常见用例是将其用于nuxtServerInit
或在构建过程中(yarn build
或yarn generate
),以使用headless CMS的API调用填充应用。更多信息可以在此博客文章中找到:https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config/
.vue
文件/plugins
中访问它nuxt.config.js
文件中的任何键需要此变量,请直接使用有时,语法可能会有一点不同,在这种情况下,请参考您的Nuxt模块文档。
PS:如果你使用
target: server
(默认值),你可以使用yarn build
和yarn start
将你的应用部署到生产环境中。然后,根据你的需要更改任何环境变量,并再次使用yarn start
。这样就不需要重新构建了。因此命名为 RuntimeConfig!Nuxt 3更新
正如这里和文档中所提到的,您可以对Nuxt 3使用以下代码
nuxt.config.js
在任何组件中
在像
/composables/test.js
这样的组合中,如以下注解所示这是这部分的官方文档。
eeq64g8w6#
您还可以将
env
属性与Nuxt nuxt.config.js一起使用:然后在插件中: