Nuxt 3 区分环境的核心方案是结合 `.env` 文件与 `package.json` 脚本命令，并通过 `nuxt.config.ts` 中的 `runtimeConfig` 管理变量。开发环境通常直接使用 `nuxt dev`，测试和生产环境建议通过 `--dotenv` 参数加载特定配置文件，敏感配置必须放入 `runtimeConfig` 避免泄露到客户端。

命令速用版

在 `package.json` 的 `scripts` 字段中配置不同环境的启动命令，利用 `--dotenv` 指定配置文件：

"scripts": {
  "dev": "nuxt dev `--dotenv` .env.development",
  "test": "nuxt dev `--dotenv` .env.test",
  "build": "nuxt build `--dotenv` .env.production",
  "start": "nuxt start `--dotenv` .env.production"
}

若需设置 `NODE_ENV`，可配合 `cross-env` 使用：

"dev": "cross-env NODE_ENV=development nuxt dev",
"build": "cross-env NODE_ENV=production nuxt build"

为什么会这样

Nuxt 3 不再推荐直接在客户端代码中读取 `process.env.NODE_ENV`，因为构建时变量会被固化。

Nuxt 3 引入了 `runtimeConfig` 作为统一的配置方案，整合了服务端私有配置和客户端公开配置。构建时（build）确定的变量无法在运行时（start）动态改变，因此区分环境需要在启动命令阶段加载不同的 `.env` 文件，并将需要动态切换的值写入 `nuxt.config.ts` 的 `runtimeConfig` 中，通过 `useRuntimeConfig()` 在应用内访问。

分步处理

第一步：创建环境文件

在项目根目录创建 `.env.development`、`.env.test` 和 `.env.production`。注意变量名需以 `NUXT_` 开头才能被自动加载，公开变量需加 `NUXT_PUBLIC_` 前缀。

# .env.test
NUXT_PUBLIC_API_BASE=https://test-api.example.com
NUXT_API_SECRET=secret_key_test

第二步：配置 package.json

修改 `scripts` 字段，确保不同命令加载对应的 `.env` 文件。测试环境建议拆分为构建和启动两步，或直接使用 `dev` 命令加载测试配置。

第三步：配置 nuxt.config.ts

在 `defineNuxtConfig` 中定义 `runtimeConfig`，使用 `process.env` 读取 `.env` 中的值作为默认值。

export default defineNuxtConfig({
  runtimeConfig: {
    apiKey: '', // 私有，仅服务端
    public: {
      apiBase: '/api' // 公开，客户端可访问
    }
  }
})

第四步：代码中使用

在组件或 Composables 中使用 `useRuntimeConfig()` 获取配置，避免直接 import `.env` 文件。

const config = useRuntimeConfig()
console.log(config.public.apiBase)

怎么验证是否生效

启动项目后，检查控制台日志或页面输出。在服务端渲染日志中查看加载的 `apiBase` 是否符合当前环境预期。对于客户端可见配置，可在浏览器控制台打印 `useRuntimeConfig()` 返回值，确认未包含敏感私有密钥。

通过网络请求面板检查 API 请求地址是否指向了测试环境或生产环境的域名，而非本地 localhost。

常见坑

1. 变量前缀错误：Nuxt 3 默认只加载以 `NUXT_` 开头的环境变量，普通变量需在 `nuxt.config.ts` 中手动映射。

2. 客户端泄露：放入 `runtimeConfig.public` 的变量会暴露给浏览器，严禁将 API 密钥等敏感信息放入 `public` 对象。

3. 构建后无法切换：`nuxt build` 生成的产物中部分配置可能已固化，若需运行时切换环境，必须确保配置读取的是运行时环境变量而非构建时常量。

常见问题

NODE_ENV 在 Nuxt 3 中还能直接用吗？

不建议直接在客户端代码中使用。Nuxt 3 运行时不再直接依赖 `process.env.NODE_ENV` 的值，敏感或动态配置应通过 `runtimeConfig` 声明。

如何在客户端获取环境变量？

只有在 `nuxt.config.ts` 中 `runtimeConfig.public` 下声明的变量才能安全地在客户端通过 `useRuntimeConfig()` 获取。

测试环境需要单独构建吗？

建议测试环境也执行 `nuxt build` 和 `nuxt start`，以模拟生产环境行为，避免开发模式下的差异导致测试遗漏。

参考来源

• Nuxt 3 项目里怎么用 package. 区分开发、测试和生产环境的 NODE_ENV?
• Nuxt3-环境变量配置 - 忙着可爱呀~ - 博客园
• 10 分钟掌握 Nuxt 环境配置：从开发到生产的安全变量管理终极指南
• NuxtJS3 配置多环境变量