vite在請求static html時發送root index.html內容

Question

我正在使用 TradingView 的圖表庫，它需要將 static HTML 加載到 iFrame 中。我已將 static html 放在public文件夾中：

/public/charting_library/en-tv-chart.b555c6a4.html

它通過以下方式訪問：

localhost:3000/charting_library/en-tv-chart.b555c6a4.html

但是，當請求上述 URL 時，內容是根index.html的內容，而不是 static 資產的內容。

如何讓 Vite 在此處正確路由 HTML 資產？

Answer 1

我通過使用 Vite 中間件解決了這個問題：

function chartingLibrary(): PluginOption {
  return {
    apply: 'serve',
    configureServer(server: ViteDevServer) {
      return () => {
        server.middlewares.use(async (req, res, next) => {
          if (req.originalUrl?.includes('/charting_library/') && req.originalUrl?.includes('html')) {
            res.setHeader('Content-Type', 'text/html');
            res.writeHead(200);
            res.write(fs.readFileSync(path.join(__dirname, `public/${req.originalUrl}`)));
            res.end();
          }

          next();
        });
      };
    },
    name: 'charting-library',
  };
}

然后在配置中：

{
  // ...
  plugins: [
    // ...
    chartingLibrary(),
  ],
}