基于Vite与react-router-dom的网站粘贴URL后资源加载路径错误

问题根源 #

你的Vite配置中base: ''会让资源以相对路径加载，当在子路由mysite.blah/page1刷新时，浏览器会错误地从mysite.blah/page1/assets/路径请求资源，而非正确的根路径mysite.blah/assets/。

解决方案 #

1. 修正Vite的base配置 #

修改vite.config.ts中的base为根路径'/'：

export default defineConfig({
  base: '/', // 替换原来的空字符串
  // ...其他配置不变
});

注意：如果应用部署在子目录（如mysite.blah/my-app/），则base需设为对应子目录路径，比如'/my-app/'。

2. 确认react-router-dom的BrowserRouter配置 #

确保BrowserRouter未错误设置basename（根部署场景无需额外配置）：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/page1" component={Page1} />
        <Route exact path="/" component={Home} />
      </Switch>
    </Router>
  );
}

3. 生产部署必须配置SPA Fallback #

静态服务器（如Nginx、Apache）需要配置路由 fallback，让所有子路由请求都指向index.html，否则刷新子路由会返回404：

• Nginx示例配置：

  server {
    listen 80;
    server_name mysite.blah;
    root /path/to/your/dist;
  
    location / {
      try_files $uri $uri/ /index.html;
    }
  }
  

• Apache示例配置（.htaccess）：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

4. 验证修复效果 #

执行npm run build后，查看dist/index.html中的资源引用，确认路径为/assets/xxx.js而非相对路径assets/xxx.js，之后重新部署即可解决刷新子路由的资源加载问题。

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