Nuxt执行generate后页面空白且报404错误，求解决方案

针对你遇到的问题，按以下步骤排查解决：

1. 禁止直接双击打开index.html #

静态站点的资源路径默认基于HTTP协议的绝对路径，直接用file://协议打开会导致资源加载失败，出现404和空白页。必须用本地HTTP服务器访问：

• 安装轻量服务器工具：

  npm install -g serve
  

• 进入生成的dist目录：

  cd dist
  

• 启动服务器：

  serve
  

• 访问终端输出的本地地址（通常是http://localhost:3000）即可正常加载页面。

2. 检查路由fallback配置 #

因为你设置了ssr: false（SPA模式），前端路由需要服务器将所有请求重定向到index.html，否则刷新页面或直接访问子路由会触发404：

• 本地测试用serve工具已经自动支持SPA fallback，无需额外配置；
• 生产部署时，需在服务器配置中添加fallback规则，比如Nginx需添加：

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

3. 核对路由基础路径配置 #

如果你的nuxt.config.js中设置了router.base（比如部署到子路径），需对应调整访问方式：

• 假设配置为：

  export default {
    router: {
      base: '/my-app/'
    }
  }
  

• 启动服务器时需指定前缀：

  serve -s dist --prefix /my-app/
  

• 访问地址应为http://localhost:3000/my-app/

4. 清理并重新生成静态文件 #

残留的旧文件可能导致异常，先清理再重新生成：

• 清理dist目录：

  # Linux/macOS
  rm -rf dist
  
  # Windows
  rd /s /q dist
  

• 重新执行生成命令：

  npm run generate
  

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