Netlify部署React/Vite项目后出现空白页或页面未找到问题求助

1. 核对Vite基础配置 #

• 确保vite.config.js中的base配置正确：
  • 部署到根域名时，设置base: '/'；如果是子路径部署，替换为对应路径（比如'/my-app/'），也可以根据环境动态设置：

    // vite.config.js
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    
    export default defineConfig({
      plugins: [react()],
      base: process.env.NODE_ENV === 'production' ? '/' : '/'
    })
    

• 检查package.json的build命令：必须是"build": "vite build"，本地执行npm run build后能生成完整的dist文件夹。

2. 配置SPA路由重写（解决刷新/直接访问子路由404） #

Netlify默认不会处理SPA的路由跳转，需要添加重写规则：

• 在项目的public目录下创建_redirects文件（注意开头的下划线），写入：

  /*    /index.html   200
  

• 或者使用netlify.toml配置（放在项目根目录）：

  [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200
  

3. 检查Netlify部署参数 #

进入Netlify站点的「Build & deploy」设置：

• 确认「Build command」为npm run build
• 确认「Publish directory」为dist（Vite默认打包输出目录）
• 如果项目用到环境变量，在「Environment variables」中添加对应的键值对（比如VITE_APP_API_URL这类变量）

4. 本地预验证构建结果 #

本地执行npm run build后，用npx serve dist启动静态服务测试。如果本地访问也有空白/404，先修复本地构建的代码问题，再重新部署。

5. 清理Netlify缓存 #

如果部署后还是显示旧内容，在Netlify部署页面点击「Clear cache and deploy site」，强制重新构建部署。

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