Vite React应用部署Nginx子目录后刷新路由出现404错误求助

核心问题原因 #

React使用的是客户端路由，刷新/stock/app/login这类路径时，Nginx会尝试在服务器上寻找对应的物理文件，但这些路由对应的文件并不存在，因此返回404。你之前的配置是针对根目录场景的，不适用于子目录部署，需要调整两个关键配置：

1. 修改Nginx配置 #

将原来的根目录匹配规则，替换为子目录的精准匹配规则，同时指定正确的入口文件路径：

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

• location /stock/app/用于匹配子目录下的所有请求
• try_files的最后一项/stock/app/index.html必须和你的子目录路径完全一致，确保Nginx找不到物理文件时，将请求转发到React的入口文件，由客户端路由处理

2. 配置Vite的基础路径 #

因为应用部署在子目录，Vite打包时需要明确基础路径，否则资源引用和路由都会出现错误。修改项目根目录下的vite.config.js：

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

export default defineConfig({
  plugins: [react()],
  base: '/stock/app/' // 必须和部署的子目录路径一致，结尾需加斜杠
});

3. 重新打包并部署 #

修改完Vite配置后，重新执行打包命令：

npm run build

将打包生成的dist目录内所有文件，放到Nginx服务器对应的子目录下（比如Nginx的根目录是/usr/share/nginx/html，就把文件放到/usr/share/nginx/html/stock/app目录中）。

额外注意事项 #

• 确保Nginx配置中没有其他与/stock/app/冲突的location规则，更精准的匹配规则会优先执行
• 修改Nginx配置后，执行sudo nginx -s reload重启服务使配置生效

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