diff --git a/index.html b/index.html
index 88478614..a671f51e 100644
--- a/index.html
+++ b/index.html
@@ -1,41 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PageSpy</title>
-  <link rel="icon" href="/favicon.ico">
-  <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg">
-  <% if (isDoc) { %>
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PageSpy</title>
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
+    <% if (isDoc) { %>
     <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-TFP524RRV2"></script>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-TFP524RRV2"
+    ></script>
     <script>
       window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
+      function gtag() {
+        dataLayer.push(arguments);
+      }
       gtag('js', new Date());
 
       gtag('config', 'G-TFP524RRV2');
     </script>
-  <% } %>
-  <script src="/source-map/source-map.min.js"></script>
-  <script>
-    const mappingWasmUrl = new URL('/source-map/mappings.wasm', window.location.href).toString()
-    sourceMap.SourceMapConsumer.initialize({
-      "lib/mappings.wasm": mappingWasmUrl
-    });
-  </script>
-  <script src="/shiki/dist/index.jsdelivr.iife.js"></script>
-  <script>
-    const shikiURL = new URL('/shiki', window.location.origin).toString()
-    window.shiki.setCDN(shikiURL)
-  </script>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script src="/src/main.tsx" type="module"></script>
-</body>
+    <% } %>
+    <script src="/source-map/source-map.min.js"></script>
+    <script>
+      const mappingWasmUrl = new URL(
+        '<%- base %>source-map/mappings.wasm',
+        window.location.origin,
+      ).toString();
+      sourceMap.SourceMapConsumer.initialize({
+        'lib/mappings.wasm': mappingWasmUrl,
+      });
+    </script>
+    <script src="/shiki/dist/index.jsdelivr.iife.js"></script>
+    <script>
+      const shikiURL = new URL(
+        '<%- base %>shiki',
+        window.location.origin,
+      ).toString();
+      window.shiki.setCDN(shikiURL);
+    </script>
+  </head>
 
+  <body>
+    <div id="root"></div>
+    <script src="/src/main.tsx" type="module"></script>
+  </body>
 </html>
diff --git a/vite.config.mjs b/vite.config.mjs
index aecb0275..bddd6e3c 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -8,9 +8,10 @@ import { ViteEjsPlugin } from 'vite-plugin-ejs';
 export default ({ mode, command }) => {
   const isDoc = mode === 'doc';
   const isProd = command === 'build';
+  const base = isDoc ? '/page-spy-web/' : '/';
 
   return defineConfig({
-    base: isDoc ? '/page-spy-web/' : '/',
+    base,
     build: {
       target: ['chrome100'],
       sourcemap: isProd ? 'hidden' : true,
@@ -37,6 +38,7 @@ export default ({ mode, command }) => {
       react(),
       svgr(),
       ViteEjsPlugin({
+        base,
         isDoc,
       }),
     ],
