React子路径部署三件套：base + basename + nginx alias

把React应用部署到/meeting/子路径下，Vite build没问题，但部署后页面白屏、JS加载404、刷新路由404。排查了半天，发现需要三处配置同时改。

三件套缺一不可

1. vite.config.ts

typescript

export default defineConfig({
  base: '/meeting/',
  // ...
})

2. src/index.tsx

tsx

import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename="/meeting">
    <App />
  </BrowserRouter>
);

3. nginx.conf

nginx

location /meeting/ {
    alias /usr/share/nginx/html/;
    try_files $uri $uri/ /meeting/index.html;
}

常见坑

坑1：只改了base，没改basename

页面能打开，但路由跳转后刷新404。base控制静态资源路径，basename控制路由路径，两个都要改。

坑2：nginx用了root而不是alias

nginx

# ❌ 错误：会去 /usr/share/nginx/html/meeting/ 找文件
location /meeting/ {
    root /usr/share/nginx/html;
}

# ✅ 正确：指向 /usr/share/nginx/html/
location /meeting/ {
    alias /usr/share/nginx/html/;
}

坑3：改完没rebuild

只在本地改了vite.config.ts，ECS上没改、没rebuild → 页面仍引用/assets/根路径，被灵析抢走。

JS文件变成HTML（白屏排查）

text

现象：index-C1o-3CPM.js 返回1803字节HTML
原因：nginx没找到JS文件，回退到index.html
排查：用HTML里真实的hash值（如index-C1o-3CPM.js），不是旧的文件名

正确的JS响应应该是：Content-Type: application/javascript，体积30万+字节。

踩坑总结

子路径部署有三处配置必须同时改：base、basename、nginx alias。缺一不可，改了其中一处忘了另一处，页面就会出问题。