Vite请求静态HTML返回根index.html，如何正确路由该静态资源？

问题原因 #

Vite在SPA开发模式下，默认会将未匹配到实际文件的请求 fallback 到根目录的index.html。如果你的前端路由（如Vue Router、React Router）使用了history模式，可能会拦截对静态HTML文件的请求，导致返回index.html而非目标文件。

解决方案 #

1. 确认文件路径正确性 #

• 确保文件实际存在于项目根目录的public/charting_library/en-tv-chart.b555c6a4.html路径下
• 检查文件名大小写：Linux/macOS系统区分大小写，确保请求URL的文件名与实际文件完全一致

2. 通过Vite中间件优先处理目标路径 #

在vite.config.js（或vite.config.ts）中添加自定义中间件，让Vite优先返回目标静态HTML文件：

import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';

export default defineConfig({
  server: {
    configureMiddleware(middleware) {
      // 拦截目标HTML文件的请求，直接返回文件内容
      middleware.use('/charting_library/en-tv-chart.b555c6a4.html', (req, res, next) => {
        const filePath = path.resolve(__dirname, 'public', 'charting_library', 'en-tv-chart.b555c6a4.html');
        
        fs.readFile(filePath, 'utf8', (err, data) => {
          if (err) {
            // 如果文件不存在，交给后续中间件处理
            next();
            return;
          }
          res.setHeader('Content-Type', 'text/html');
          res.end(data);
        });
      });
    }
  }
});

3. 绕过前端路由拦截 #

如果使用了前端路由库（如Vue Router、React Router），可以配置路由规则，让目标路径不被前端路由处理：

Vue Router 示例

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 其他路由规则
    {
      path: '/charting_library/en-tv-chart.b555c6a4.html',
      beforeEnter: (to) => {
        // 直接跳转到静态文件，绕过前端路由
        window.location.href = to.fullPath;
      }
    }
  ]
});

React Router 示例

import { Routes, Route, Navigate } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* 其他路由 */}
      <Route 
        path="/charting_library/en-tv-chart.b555c6a4.html" 
        element={<Navigate to="/charting_library/en-tv-chart.b555c6a4.html" replace />} 
      />
    </Routes>
  );
}

4. 生产构建验证 #

生产构建时，Vite会自动将public文件夹下的文件复制到dist目录。构建完成后，直接访问dist/charting_library/en-tv-chart.b555c6a4.html即可确认文件是否正确输出。

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