如何在Nuxt+Cloudflare Pages项目中为wrangler pages dev配置环境变量？

环境配置 #

• Nuxt: ^3.15.3
• Cloudflare Pages: 最新版本
• Wrangler: 3.99.0（固定版本）
• 包管理器：PNPM 9.12.2
• Node: 22.13.1
• 构建命令：pnpm build，通过pnpm wrangler pages dev dist测试生产构建

已尝试的操作 #

• 在nuxt.config.js中配置runtime config：

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      consolaLevel: ''  // 预期会被NUXT_PUBLIC_CONSOLA_LEVEL覆盖
    }
  }
})

• 在wrangler.toml中添加环境变量：

[vars]
NUXT_PUBLIC_CONSOLA_LEVEL = "WRANGLER.TOML FILE"

• 通过命令行绑定设置：

pnpm wrangler pages dev dist --binding NUXT_PUBLIC_CONSOLA_LEVEL="test value"

• 在.dev.vars和.env文件中添加变量（在pnpm dev开发环境中可正常生效）

测试代码 #

<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>

测试结果 #

• 开发环境（pnpm dev）：环境变量可正常生效
• 生产构建测试（pnpm wrangler pages dev dist）：尽管在多处设置了环境变量，consolaLevel仍为空值

问题核心 #

根据Nuxt文档，所有以NUXT_PUBLIC_开头的环境变量应自动覆盖对应的runtime config值，这在开发环境中有效，但在使用Wrangler测试生产构建时无效。

我遗漏了什么？如何让环境变量在wrangler pages dev中正常工作？

wrangler.toml核心内容 #

name = "myapp"
compatibility_date = "2024-11-12"
compatibility_flags = ["nodejs_compat"]
pages_build_output_dir = "./dist"

[vars]
NUXT_PUBLIC_CONSOLA_LEVEL = "WRANGLER.TOML FILE"

内容的提问来源于stack exchange，提问作者John