Nuxt3使用npm run generate部署后server/api路由404求助

核心原因 #

npm run generate会生成纯静态的HTML/CSS/JS文件，没有Node.js运行环境，而你在server/api下写的代理接口是依赖服务器端运行的Node.js代码，静态站点无法执行这些代码，因此访问/api/home会返回404。

解决办法 #

1. 改用SSR/边缘渲染部署 #

放弃静态生成，切换到服务器端渲染模式部署：

• 执行npm run build构建项目
• 部署到支持Node.js的平台（如Vercel、Netlify的SSR模式、自建Node服务器），启动命令为node .output/server/index.js
• 这种方式下，server/api的接口会和开发环境一致正常运行

2. 预渲染静态数据（适合数据不频繁更新的场景） #

如果接口返回的数据无需动态变化，可以在生成阶段预获取数据，避免客户端调用接口：

<script setup>
const langCookie = useCookie('ln');
const { data: homeData } = await useAsyncData('home-data', () => 
  $fetch('https://mybaseurl/home', {
    headers: {
      "Accept-Language": langCookie.value
    }
  })
);
storeHome.setHomeData(homeData.value);
</script>

执行npm run generate时，Nuxt会预获取数据并注入到静态页面中，客户端无需再调用/api/home。

3. 客户端直接请求第三方API（需处理跨域） #

如果第三方API支持跨域请求，或你能配置CORS，可直接在客户端调用第三方API，去掉server层的代理：

<script setup>
const langCookie = useCookie('ln');
const { data, pending } = await useFetch('https://mybaseurl/home', {
  headers: {
    "Accept-Language": langCookie.value
  }
});
storeHome.setHomeData(data.value);
</script>

开发时若遇到跨域问题，可在nuxt.config.ts中配置代理：

export default defineNuxtConfig({
  devtools: { enabled: true },
  proxy: {
    '/api/proxy': {
      target: 'https://mybaseurl',
      changeOrigin: true,
      pathRewrite: { '^/api/proxy': '' }
    }
  }
});

此时客户端调用/api/proxy/home即可，生产环境若第三方API允许跨域，可直接替换为真实地址。

4. 检查文件路径匹配 #

确认server/api下的文件路径和调用的接口一致：你调用的是/api/home，对应的文件应该是server/api/home.js（或.ts），而非示例中的server/api/file.js，路径不匹配也会导致404。

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