Nuxt SSG 生成的slug路由直接访问返回404问题求助

你遇到的这个问题大概率是托管服务的路由规则配置问题，不是Nuxt本身的问题：执行npm run generate已经成功生成了对应路由，且客户端跳转正常，说明Nuxt的SSG生成逻辑本身没有问题，直接访问URL触发404是因为服务端没有匹配到对应静态资源。

排查步骤 #

1. 首先验证本地dist目录结构

• 打开项目生成的dist文件夹，确认存在/projects/encinal-canyon/index.html文件
  • 若文件不存在：属于Nuxt生成配置问题，需要检查动态路由生成逻辑，确认你通过Apollo拉取DatoCMS slugs生成路由的代码是否正常生效，Nuxt2检查generate.routes配置，Nuxt3检查nitro.prerender.rules配置
  • 若文件存在：属于托管服务的路由匹配问题，按下方对应方案配置即可

对应解决方案 #

如果你用Nginx自行托管 #

在站点的Nginx配置server块中添加try_files规则，支持路径自动匹配对应目录下的index.html，同时配置 fallback 到Nuxt生成的200.html：

server {
  # 其余配置省略
  root /你的项目路径/dist;
  index index.html;
  location / {
    try_files $uri $uri/ $uri.html /200.html;
  }
}

修改配置后重启Nginx即可生效。

如果你用第三方静态托管平台 #

• Netlify：在项目根目录新建_redirects文件，写入如下内容后重新部署即可

/* /200.html 200

• Vercel：在项目根目录新建vercel.json文件，写入如下配置后重新部署

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/200.html" }
  ]
}

• Cloudflare Pages：进入站点控制台的「规则」-「转换规则」，添加URL重写规则，将所有请求路径转发到/200.html后保存生效。

额外配置检查 #

如果上述配置后还是存在问题，可以检查Nuxt配置中的trailingSlash参数：

• 如果你希望访问路径末尾带斜杠（如/projects/encinal-canyon/），配置trailingSlash: true
• 如果你希望访问路径末尾不带斜杠，配置trailingSlash: false
  统一路径格式避免匹配异常。

内容的提问来源于stack exchange，提问作者John the Painter