fix: static hosting for standalone build

Author: antfu

packages/core/src/client/webcomponents/components/ViewIframe.vue

@@ -57,7 +57,7 @@ onUnmounted(() => {
     ref="viewFrame"
     class="vite-devtools-view-iframe w-full h-full flex items-center justify-center"
   >
-    <div class="op50">
+    <div class="op50 z--1">
       Loading iframe...
     </div>
   </div>

packages/core/src/node/cli.ts

@@ -5,9 +5,10 @@ import process from 'node:process'
 import c from 'ansis'
 import cac from 'cac'
 import { getPort } from 'get-port-please'
-import { createApp, eventHandler, sendRedirect, toNodeListener } from 'h3'
+import { createApp, eventHandler, fromNodeMiddleware, sendRedirect, toNodeListener } from 'h3'
 import open from 'open'
 import { join, relative, resolve } from 'pathe'
+import sirv from 'sirv'
 import { dirClientStandalone } from '../dirs'
 import { MARK_NODE } from './constants'
 import { createDevToolsMiddleware } from './server'
@@ -93,11 +94,19 @@ cli
     })
 
     const app = createApp()
+
+    for (const { baseUrl, distDir } of devtools.context.views.buildStaticDirs) {
+      app.use(baseUrl, fromNodeMiddleware(sirv(distDir, {
+        dev: true,
+        single: true,
+      })))
+    }
+
+    app.use('/.devtools/', h3.handler)
     app.use('/', eventHandler(async (event) => {
       if (event.node.req.url === '/')
         return sendRedirect(event, '/.devtools/')
     }))
-    app.use('/.devtools', h3.handler)
 
     const server = createServer(toNodeListener(app))
 

packages/core/src/node/host-views.ts

@@ -18,6 +18,8 @@ export class DevToolsViewHost implements DevToolsViewHostType {
       throw new Error(`[Vite DevTools] distDir ${distDir} does not exist`)
     }
 
+    this.buildStaticDirs.push({ baseUrl, distDir })
+
     if (this.context.viteConfig.command === 'serve') {
       if (!this.context.viteServer)
         throw new Error('[Vite DevTools] viteServer is required in dev mode')
@@ -29,8 +31,5 @@ export class DevToolsViewHost implements DevToolsViewHostType {
         }),
       )
     }
-    else {
-      this.buildStaticDirs.push({ baseUrl, distDir })
-    }
   }
 }

packages/vite/src/node/plugin.ts

@@ -14,7 +14,7 @@ export function DevToolsViteUI(): PluginWithDevTools {
         }
 
         ctx.views.hostStatic(
-          '/.devtools-vite',
+          '/.devtools-vite/',
           clientPublicDir,
         )