Nuxt 3构建时更新.env变量及staging构建配置失效问题求助

问题根源 #

你在脚本中设置的NUXT_MODE=staging被.env文件里的NUXT_MODE=development覆盖了——Nuxt3加载环境变量时，.env文件的优先级高于脚本中临时设置的系统环境变量（除非明确指定加载不同的环境配置文件）。同时你的nuxt.config.ts依赖NUXT_MODE切换API地址，因环境变量被覆盖，导致始终使用开发环境配置。

最优方案：多环境.env文件+脚本指定环境 #

这种方式无需手动修改.env内容，通过指定环境自动加载对应配置，是Nuxt3推荐的多环境构建方式。

1. 创建分环境的.env文件 #

• 创建.env.development（开发环境）：

NUXT_MODE=development
NUXT_BASE=http://localhost:3000/
NUXT_API_BASE=http://localhost:3001/

• 创建.env.staging（staging环境）：

NUXT_MODE=staging
NUXT_BASE=http://my-staging-url/
NUXT_API_BASE=http://my-staging-api-url/

2. 修改package.json脚本 #

推荐用cross-env实现跨平台兼容：

1. 先安装cross-env：

npm install -D cross-env

2. 更新脚本：

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "cross-env NODE_ENV=development NODE_OPTIONS=--max_old_space_size=8192 nuxt generate",
    "generate_staging": "cross-env NODE_ENV=staging NODE_OPTIONS=--max_old_space_size=80096 nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "3.0.0",
    "cross-env": "^7.0.3"
  },
  "dependencies": {
    "element-plus": "^2.2.27"
  }
}

Nuxt3会自动根据NODE_ENV的值加载对应的.env.[NODE_ENV]文件，无需手动切换配置。

3. 简化nuxt.config.ts #

Nuxt3会自动将NUXT_开头的环境变量注入到runtimeConfig.public中，无需再通过NUXT_MODE判断，直接读取对应变量即可：

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    ssr: false,
    experimental: { payloadExtraction: false },
    modules: [],
    runtimeConfig: {
        target: "static",
        public: {
            apiBase: process.env.NUXT_API_BASE
        }
    },
})

替代方案：脚本中直接覆盖环境变量 #

如果不想创建多个.env文件，可在脚本中直接指定需要覆盖的所有变量（系统环境变量优先级高于.env文件）：

"generate_staging": "NUXT_MODE=staging NUXT_API_BASE=http://my-staging-api-url/ NUXT_BASE=http://my-staging-url/ nuxt generate --max-old-space-size=80096"

这种方式适合环境配置较少的场景，但维护性不如多.env文件方案。

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