Nuxt 3多环境配置问题：测试环境无法切换至测试端点

问题描述 #

我需要在Nuxt 3中配置开发/生产环境，满足测试场景需求：当应用URL以develop-、staging-或test-开头时，使用测试端点（如https://develop-www.app.com/）。目前通过NODE_ENV变量配置的nuxt.config在本地和生产环境正常运行，但测试环境仍默认使用生产端点。尝试在GitHub Actions中添加generateTest脚本，设置NODE_ENV=development执行nuxt generate，却收到警告：[warn] Changing NODE_ENV from development to production, to avoid unintended behavior. 请问如何正确配置多环境端点？

现有配置 #

nuxt.config配置 #

const isProdEnv = process.env.NODE_ENV === 'production';
const testServicesEndpoint = 'https://test-services.location';
const prodServicesEndpoint = 'https://services.prodlocation';
const servicesEndpoint = isProdEnv ? prodServicesEndpoint : testServicesEndpoint;

export default defineNuxtConfig({
     runtimeConfig: {
        public: {
          apiBase: servicesEndpoint,
        },
      },
})

package.json脚本配置 #

"scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "generateTest": "NODE_ENV=development nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },

解决方案 #

1. 放弃用NODE_ENV区分测试环境 #

Nuxt在执行build或generate命令时，会强制将NODE_ENV设置为production，这是框架内置行为，目的是避免开发环境配置意外混入生产构建，所以你手动设置NODE_ENV=development会被覆盖并触发警告。建议改用自定义环境变量（比如APP_ENV）来区分测试/生产/开发场景。

2. 修改package.json脚本 #

把generateTest脚本改成传递自定义环境变量，不再修改NODE_ENV：

"scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "generateTest": "APP_ENV=test nuxt generate",
    "generateStaging": "APP_ENV=staging nuxt generate", // 可选：针对不同测试环境单独配置
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },

3. 更新nuxt.config配置 #

根据自定义的APP_ENV变量判断环境，同时兼容本地开发场景：

// 优先使用自定义环境变量APP_ENV，默认回退到NODE_ENV
const appEnv = process.env.APP_ENV || process.env.NODE_ENV;
const testServicesEndpoint = 'https://test-services.location';
const prodServicesEndpoint = 'https://services.prodlocation';

// 判断是否为测试环境：APP_ENV为test/staging/develop，或本地开发环境
const isTestEnv = ['test', 'staging', 'develop'].includes(appEnv) || appEnv === 'development';
const servicesEndpoint = isTestEnv ? testServicesEndpoint : prodServicesEndpoint;

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: servicesEndpoint,
    },
  },
})

4. 可选：根据部署后URL动态切换端点（适合静态站点） #

如果你的测试环境是静态部署（比如GitHub Pages、Netlify），且部署后的URL前缀是develop-/staging-/test-，可以在客户端初始化时动态判断并切换端点，无需重新构建：

创建plugins/set-api-base.ts文件：

export default defineNuxtPlugin(() => {
  const runtimeConfig = useRuntimeConfig();
  const hostname = window.location.hostname;

  // 检查当前域名是否以测试前缀开头
  if (hostname.startsWith('develop-') || hostname.startsWith('staging-') || hostname.startsWith('test-')) {
    runtimeConfig.public.apiBase = 'https://test-services.location';
  }
})

这种方式更灵活，同一个静态构建包可以部署到不同测试环境，自动适配端点。

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