静态生成的Nuxt应用动态SPA路由直接访问404如何解决？

你当前配置已经正确排除了/items路径的静态生成，且设置了回退页面404.html，直接访问出现404的核心原因是：静态站点托管服务默认会匹配路径对应存在的静态HTML文件，你排除了/items相关页面的生成，托管服务找不到对应文件就会直接返回404，没有把请求转发给你配置的回退页面交给Nuxt客户端路由处理。

1. Nuxt配置优化（可选） #

你当前的nuxt.config.js配置本身没有问题，如果想简化可以删除手动的extendRoutes配置，按照Nuxt页面约定规则创建文件即可：

• 列表页对应pages/items.vue
• 详情页对应pages/items/_id.vue
  不需要额外手动注册路由即可生效。

2. 托管服务配置URL重写规则 #

需要根据你使用的托管服务添加规则，将所有/items/*路径的请求转发到Nuxt生成的回退页面404.html，常见托管服务的配置如下：

• Nginx部署：在站点配置的server块中添加以下规则

location /items/ {
  try_files $uri $uri/ /404.html;
}

• Netlify部署：在项目根目录新建_redirects文件，添加如下内容

/items/* /404.html 200

• Vercel部署：在项目根目录新建vercel.json，添加如下配置

{
  "rewrites": [
    { "source": "/items/:path*", "destination": "/404.html" }
  ]
}

• GitHub Pages部署：你当前配置的fallback: '404.html'已经符合要求，GitHub Pages会自动将不存在的路径指向404.html，仅需注意默认返回的HTTP状态码为404，不影响页面正常访问。

配置完成后重新部署即可解决直接访问/items/42返回404的问题。

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