React Vite部署Netlify后刷新显示Page not found的解决求助

1. 修正Netlify路由重写配置 #

方式一：使用 .redirects 文件 #

确保 .redirects 文件放在项目的 public 目录下（Vite会自动将public目录内的文件复制到构建后的dist文件夹），文件内容为：

/* /index.html 200

这条规则会将所有请求重定向到index.html，交由React路由接管页面渲染逻辑。

方式二：使用 _netlify.toml 文件（更推荐） #

在项目根目录创建 _netlify.toml 文件，添加以下配置：

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

Netlify对toml格式的配置解析更稳定，相比.redirects更易维护。

2. 调整Vite构建配置 #

简化你的 vite.config.js，确保基础路径和输出目录配置正确：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  base: "/", // 若部署在子路径，改为对应路径，比如"/my-react-site/"
  build: {
    outDir: "dist", // 确保Netlify发布目录与该值一致
  },
  plugins: [react()],
});

无需额外配置rollupOptions的input项，Vite默认会以项目根目录的index.html作为入口，多余配置可能引发冲突。

3. 验证Netlify站点设置 #

登录Netlify后台进入你的站点：

• 确认构建命令为 npm run build
• 确认发布目录为 dist
• 手动触发一次重新构建，确保新配置文件生效

完成以上步骤后，页面刷新404的问题即可解决。

内容的提问来源于stack exchange，提问作者Ali Ahmed Khan