Nuxt与Express服务在生产环境/dist目录下无法接收API请求的问题

我来帮你梳理下问题所在和对应的解决办法：

问题根源 #

当你执行yarn generate时，Nuxt会生成纯静态的站点文件（输出到dist文件夹），这些文件不需要依赖Node.js服务器就能运行。但你的API服务是通过serverMiddleware挂载在Nuxt的开发服务器上的——本地开发时，nuxt dev会启动Node.js环境并加载你的express API服务，所以同一服务器下的API请求能正常工作；但静态生成后，没有了Node.js服务器来运行你的express代码，自然找不到API路由。

解决方案 #

方案1：结合express服务器部署静态文件 #

你的express代码已经配置了托管dist文件夹的逻辑（app.use(express.static(path.join(__dirname, "../", "dist")))），所以正确的部署流程应该是：

• 执行yarn generate生成静态文件到dist目录
• 启动你的express服务器（比如运行node api/index.js）
• 通过express服务器的地址访问站点（而不是直接打开dist里的HTML文件）

这样既可以托管静态页面，也能正常处理API请求，和本地开发的运行逻辑一致。

方案2：将API服务独立部署 #

如果希望把静态站点部署到静态托管服务（比如Netlify、Vercel的静态托管），同时API服务部署到独立的服务器：

1. 把你的express API部署到云服务器或Serverless平台，获得一个独立的API域名（比如https://your-api-server.com）
2. 在nuxt.config.js中配置axios的baseURL，区分开发和生产环境：

export default {
  axios: {
    baseURL: process.env.NODE_ENV === 'production' 
      ? 'https://your-api-server.com' 
      : '/' // 开发环境用相对路径走serverMiddleware
  }
}

这样静态站点就能通过绝对地址调用独立部署的API了。

方案3：（Nuxt 3专属）使用Nitro Server Routes #

如果是Nuxt 3项目，可以改用Nitro的server routes来编写API，它支持在静态生成时处理部分无状态API，或者在部署时自动将API部署为Serverless函数，无需额外维护express服务器。

额外注意 #

不要直接打开dist文件夹里的HTML文件来测试——浏览器会把它当作本地文件，不仅API请求会因为跨域被拦截，而且根本没有服务器来处理API路由，一定要通过服务器访问。

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