vuejs / devtools

⚙️ Browser devtools extension for debugging Vue.js applications.
https://devtools.vuejs.org/
MIT License
1.7k stars 122 forks source link

The route `${server.config.base}__devtools__` may result in inaccessibility when using `router.use(vite.middlewares)` #586

Open zzddlalala opened 2 months ago

zzddlalala commented 2 months ago

Recently, i tried to use devtools-next in my SSR project, but i found the error as shown in the below picture. image

I found it is caused by the unnormal route /__devtools__. So i checked the route register, and i found it is registered with the path /demo/demo/__devtools__, which includes two base string demo . It is casued by these code:

const { createServer } = await import('vite')
vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom',
})

router.use(vite.middlewares)
...
app.use(''/demo, router);

Besides, devtools-next register a the route ${server.config.base}__devtools__ by server.middlewares.

  function configureServer(server: ViteDevServer) {
    const base = (server.config.base) || '/'
    server.middlewares.use(`${base}__devtools__`, sirv(DIR_CLIENT, {
      single: true,
      dev: true,
    }))

I tried to pass base: '/' when createServer(), but it will influence the whole vite build process.

So, can you remove the server.config.base in the __devtools__ route? just like the other vite middlewares did. And let used decide how to register it. image

You can refer to this demo, thanks~ https://stackblitz.com/~/github.com/zzddlalala/vitejs-vite-ghsrnu

alexzhang1030 commented 2 months ago

We can introduce an option to let users manually register the devtools path. WDYT? @webfansplz

webfansplz commented 2 months ago

We can introduce an option to let users manually register the devtools path. WDYT? @webfansplz

I agree that we can add an option to customize it.