vite在请求static html时发送root index.html内容

Question

I'm using the charting library from TradingView, which requires static HTML to be loaded inside an iFrame. I've placed the static html inside the public folder:

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

And it is accessed via:

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

However, when requesting the above URL, the contents are that of the root index.html , not that of the static asset.

How can I get Vite to route the HTML asset correctly here?

Answer 1

I solved this by using Vite middleware:

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',
  };
}

And then in the config:

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