求助：Nuxt 3动态页面刷新后出现404错误

服务器环境刷新动态路由返回404，核心原因是服务器未配置请求转发逻辑：点击跳转是前端路由跳转，不会触发服务器请求；但刷新时浏览器会直接向服务器请求对应路径的文件，服务器找不到物理文件就返回404，而本地开发服务器默认已经处理了这个转发。

以下分两种部署场景给出解决方案：

1. 静态部署（nuxt generate生成静态文件） #

如果是将nuxt generate生成的dist文件夹部署到静态服务器，需要让Nuxt预渲染所有动态博客页面：
在nuxt.config.ts中配置预渲染路由：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: async () => {
        // 调用API获取所有文章的slug列表
        const { api } = await import('./boot/axios2.js')
        const res = await api.get('blog/entries') // 替换为你获取所有文章的接口
        return res.data.map(article => `/blog/${article.slug}`)
      }
    }
  }
})

配置完成后重新执行nuxt generate，生成的静态文件会包含每个slug对应的页面，刷新时就能正常加载。

2. 服务器端部署（nuxt build + nuxt start） #

如果是部署Nuxt服务端应用，需要配置服务器将所有请求转发到Nuxt入口文件：

Nginx配置示例 #

在站点配置中添加：

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

Apache配置示例 #

创建.htaccess文件：

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

代码优化建议 #

页面中提取slug的方式可以简化，直接用路由参数更可靠，避免服务器端渲染时的兼容性问题：

// 原代码
blogStore.fetchArticle(window.location.pathname.replace(/^\/blog\//, ''))
// 修改为
blogStore.fetchArticle(route.params.slug)

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