Nuxt3路由未找到问题：页面刷新/重载时出现404错误

当Nuxt配置ssr: false时，应用处于纯客户端渲染的SPA（单页应用）模式：

• 首次访问根路径时，服务器返回index.html，后续页面跳转由前端路由接管，因此显示正常。
• 刷新或直接访问非根路径时，浏览器会向服务器请求对应路径的物理文件，但SPA仅存在index.html这一个入口文件，服务器找不到对应文件就会返回404。
• 执行npm run generate后，若未预生成所有路由的静态文件，静态服务器仍会在请求非根路径时返回404，只是前端路由会在拿到404响应后接管页面渲染，所以页面显示正常，但网络面板会留下404请求记录。

1. 预生成所有路由（推荐，适合静态站点） #

在nuxt.config.js中配置generate.routes，让Nuxt执行npm run generate时预生成所有路由对应的静态HTML文件：

export default {
  ssr: false,
  generate: {
    // 手动指定所有静态路由
    routes: ['/', '/about', '/contact']
    // 若为动态路由，可通过API获取参数后生成，示例：
    // routes: async () => {
    //   const res = await fetch('https://api.example.com/posts')
    //   const posts = await res.json()
    //   return posts.map(post => `/posts/${post.id}`)
    // }
  }
}

重新执行npm run generate后，每个路由都会生成对应的HTML文件，刷新或直接访问路径时，服务器能找到对应文件，不会返回404。

2. 配置静态服务器的 fallback 规则（适合无法预生成所有路由的场景） #

如果应用存在大量无法提前预生成的动态路由，需让静态服务器将所有找不到的请求转发到index.html，由前端路由接管：

• 使用npx serve时，添加-s参数（启用SPA模式）：

npx serve -s .output/public

配置后所有非根路径请求都会返回index.html，网络面板的404错误会消失，页面也能正常渲染。

3. 部署到其他服务器的通用配置 #

若部署到Nginx、Apache等服务器，需配置对应的重写规则：

• Nginx：在配置文件中添加：

location / {
  try_files $uri $uri/ /index.html;
}

• Apache：在.htaccess中添加：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

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