如何在nuxt + Cloudflare页面项目的“ Wrangler Pages Dev”中设置环境变量?

问题描述 投票:0回答:1

NUXT: ^3.15.3

Cloudflare页面:最新页面
wrangler:3.99.0(固定)

使用PNPM:9.12.2作为软件包管理器

node:22.13.1

PNPM构建和测试生产构建PNPM Wrangler Pages DevDist
  • 我尝试了什么
  • nuxt.config.js中的运行时config:
  • wrangler pages dev dist/
  • added环境变量wrangler.toml:
  • export default defineNuxtConfig({ runtimeConfig: { public: { consolaLevel: '' // should be overridden by NUXT_PUBLIC_CONSOLA_LEVEL } } })

tried通过命令行绑定设置它:

  • [vars] NUXT_PUBLIC_CONSOLA_LEVEL = "WRANGLER.TOML FILE"
添加到.dev.vars和.env文件(使用PNPM DEV开发良好的变量)
  • 测试代码
pnpm wrangler pages dev dist --binding NUXT_PUBLIC_CONSOLA_LEVEL="test value"
逆转
  • 开发(PNPM开发):环境变量正常工作
在生产构建测试(PNPM Wrangler Pages dev Dist):环境变量是空的,尽管在多个位置设置了
根据NUXT文档,以NUXT_PUBLIC_开头的任何环境变量都应自动覆盖相应的运行时配置值。这在开发中起作用,但在与Wrangler一起测试生产时无效。
    我想念什么?使用
  • <script setup lang="ts"> const config = useRuntimeConfig(); const nodeEnv = process.env.NODE_ENV; </script> <template> <div> <h1>Environment Debug: {{ nodeEnv }}</h1> <pre> CONSOLA_LEVEL: {{ config.public.consolaLevel }} </pre> </div> </template>
  • 时,如何使环境变量正常工作?

基本上,您可以在本地使用静态HTTP服务器。它不会加载任何环境变量。您要做的就是运行
wrangler pages dev

https://nuxt.com/docs/getting-started/deployment#static-hosting

),它将加载您的env变量然后构建静态站点(它将默认情况下将其放入
    wrangler pages dev dist/
  • )。然后,您可以运行
  • npx nuxi generate
  • 并在本地测试该站点。
  • 但是,当您部署该项目时,您可以使用生产环境变量来建立您的项目:
https://developers.cloudflare.com/pages/configuration/build-configuration/

我以前没有亲自做到这一点。虽然,可以说,这是在CI/CD管道中进行的正确方法,但我刚刚通过

指定生产envFile

,然后运行

.output
.

environment-variables nuxt.js cloudflare nuxt3.js wrangler
1个回答
0
投票

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.