Vue DevTools Vite plugin doesn't work if going through vite-express

[srguiwiz]

When using

npm create vue@latest

one gets a project that in its vite.config.js also has the lines

import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],

and that conveniently puts an icon with tooling at the bottom of the website. That tooling is what is described at https://devtools.vuejs.org/guide/vite-plugin .

The problem is, when going through vite-express, then it doesn't work. Visually you recognize it doesn't work because if you try using it, it will look like the image currently at https://devtools.vuejs.org/help/troubleshooting (which may change in time).

I have looked at network requests, and they all seem to come back nicely with status 200. I did notice though when logging to console by adding a plugin to vite.config.js like

  plugins: [
    {
      name: "log-http-requests",
      configureServer(server) {
        server.middlewares.use((req, res, next) => {
          console.log(`[HTTP] ${req.method} ${req.url}`);
          res.on("finish", () => {
            console.log(`[HTTP] ${req.method} ${req.url} - Status: ${res.statusCode}`);
          });
          next();
        });
      },
    },
    //
    vue({

I did notice when going through vite-express it didn't show the base path at the front of each URL, they all looked like root. The rest of the app works fine though, just not the Vue DevTools.

I apologize for at this time not giving more details, because my setup has too many details. But I thought I'd mention it anyway, for completeness of record.

It is reasonable to say this isn't urgent, because one can use the Vue DevTools browser extension https://devtools.vuejs.org/guide/browser-extension without any problems.