React项目npm run build无about.html？部署Nginx后路由404咨询

dist文件夹无about.html是正常情况 #

你用react-router-dom的createBrowserRouter配置的是前端单页应用（SPA）路由，这种模式下，Vite打包后只会生成一个index.html，所有路由逻辑都由前端JS代码处理，不会为每个路由单独生成对应的.html文件。本地开发时Vite的dev服务器会自动处理路由转发，所以访问/about等路径正常。

生产环境Nginx 404的原因及解决方法 #

Nginx默认会根据请求路径查找对应的静态文件，比如访问www.example.com/about时，它会去dist目录下找about.html，找不到就返回404。要解决这个问题，需要修改Nginx配置，让所有路由请求都转发到index.html，交给前端路由处理：

修改你的Nginx站点配置，添加try_files指令：

server {
    listen 80;
    server_name www.example.com;
    # 替换成你的dist文件夹实际路径
    root /usr/share/nginx/html; 
    index index.html;

    location / {
        # 优先找静态文件，找不到就转发到index.html
        try_files $uri $uri/ /index.html;
    }

    # 可选：给静态资源设置缓存，提升性能
    location ~* \.(js|css|svg|png|ico)$ {
        expires 365d;
        add_header Cache-Control "public, no-transform";
    }
}

修改后重启Nginx服务，访问/mainpage、/about等路径就会正常加载前端路由对应的页面了。

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