Nuxt3预渲染模式构建报错：404页面未找到求助

问题原因 #

• 核心问题是nuxt.config.ts中配置的site.url或app.baseURL参数错误使用了完整HTTP URL（比如http://localhost:8000），Nuxt3预渲染时会把这个完整URL当作路由前缀拼接，生成不存在的路由/http://localhost:8000，触发404错误。
• 若手动配置nitro.prerender.routes时添加了完整URL，也会导致同样的路径解析错误。

解决方法 #

1. 修正nuxt.config.ts中的URL配置 #

打开nuxt.config.ts，检查并修改以下配置项：

• 对于site.url：仅设置域名或相对路径，开发环境用'/'，生产环境用你的域名（如'https://your-domain.com'），不要带完整的http/https前缀加端口格式。
  正确配置示例：

  export default defineNuxtConfig({
    site: {
      url: '/' // 开发环境
      // 生产环境可改为：url: 'https://your-domain.com'
    }
  })
  

• 对于app.baseURL：同样设置为相对路径'/'或不带协议的路径，禁止使用完整URL。
  正确配置示例：

  export default defineNuxtConfig({
    app: {
      baseURL: '/'
    }
  })
  

2. 检查预渲染路由配置 #

如果手动配置了nitro.prerender.routes，确保路由为相对路径（如['/', '/about']），而非完整URL。
正确配置示例：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/', '/contact']
    }
  }
})

3. 清理缓存后重新构建 #

修改配置后，先清理Nuxt缓存再执行构建：

yarn nuxt clean
yarn build

4. 验证构建结果 #

构建完成后，查看.output/public目录下的文件结构，确认生成的HTML文件对应正确路由（比如根路径为index.html，/about对应about/index.html），没有出现以http://localhost:8000命名的文件夹或文件。

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