Nuxt 3中根据环境切换不同API URL的部署问题

可能的原因及解决方案 #

1. 确认Heroku环境变量是否真正生效 #

首先排查Heroku上的NODE_ENV是否确实被设置为stage：

• 执行命令：heroku config:get NODE_ENV，查看返回值是否为stage。
• 注意：Heroku默认构建阶段的NODE_ENV是production，如果你的API URL是在构建阶段通过process.env.NODE_ENV判断生成的，那构建时就已经固化为生产URL，运行时再修改NODE_ENV也无法改变。

2. 调整Nuxt配置，改用运行时动态读取 #

避免在nuxt.config.js的publicRuntimeConfig中直接写静态条件判断（构建时会固化值），改为直接引用环境变量：

// nuxt.config.js
export default {
  publicRuntimeConfig: {
    // 直接读取环境变量，fallback到生产URL
    apiUrl: process.env.API_URL || 'https://production-api.example.com'
  }
}

然后在Heroku的配置变量中分别设置：

• 预发布环境（stage）：API_URL=https://stage-api.example.com
• 生产环境：API_URL=https://production-api.example.com

这种方式无需依赖NODE_ENV，直接通过目标环境的变量值控制API地址，更可靠。

3. 若坚持用NODE_ENV判断，改用运行时插件动态设置 #

如果一定要基于NODE_ENV区分，可通过Nuxt插件在运行时动态配置：

1. 创建plugins/api-config.js：

export default ({ $config }) => {
  switch (process.env.NODE_ENV) {
    case 'stage':
      $config.apiUrl = 'https://stage-api.example.com'
      break
    case 'production':
      $config.apiUrl = 'https://production-api.example.com'
      break
    default:
      $config.apiUrl = 'http://localhost:3000/api'
  }
}

2. 在nuxt.config.js中注册插件：

export default {
  plugins: [
    '~/plugins/api-config.js'
  ],
  // 保留基础fallback，会被运行时插件覆盖
  publicRuntimeConfig: {
    apiUrl: 'https://production-api.example.com'
  }
}

这样运行时会根据当前NODE_ENV动态覆盖API地址，不受构建阶段的环境变量影响。

4. 检查Heroku启动命令 #

确保Heroku使用正确的启动命令，在package.json中：

"scripts": {
  "start": "nuxt start"
}

避免使用nuxt dev（开发模式），确保运行的是生产构建后的代码。

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