fix: base url preview in production

sanyuan0704 · sanyuan0704 · commit 90f65a7e9285 · 2022-11-26T10:35:03.000+08:00
diff --git a/packages/island/src/node/build.ts b/packages/island/src/node/build.ts
@@ -36,6 +36,7 @@ import { performance } from 'perf_hooks';
 import pc from 'picocolors';
 import { pathToFileURL } from 'url';
 import { CLIBuildOption } from './cli';
+import { withBase } from '../shared/utils';
 
 const debug = createDebugger('island:build');
 const islandInjectId = 'island:inject';
@@ -260,7 +261,10 @@ class SSGBuilder {
         }
       })
       .join('\n');
-
+    const normalizeVendorFilename = (fileName: string) =>
+      fileName.replace(/\//g, '_') + '.js';
+    const withBaseUrl = (url: string) =>
+      withBase(url, this.#config.base || '/');
     const html = `
   <!DOCTYPE html>
   <html>
@@ -280,14 +284,18 @@ class SSGBuilder {
         {
           "imports": {
             ${DEFAULT_EXTERNALS.map(
-              (name) => `"${name}": "/${name.replace(/\//g, '_')}.js"`
+              (name) =>
+                `"${name}": "${withBaseUrl(normalizeVendorFilename(name))}"`
             ).join(',')}
           }
         }
       </script>
 
       ${styleAssets
-        .map((item) => `<link rel="stylesheet" href="/${item.fileName}">`)
+        .map(
+          (item) =>
+            `<link rel="stylesheet" href="${withBaseUrl(item.fileName)}">`
+        )
         .join('\n')}
 
     </head>
@@ -304,12 +312,16 @@ class SSGBuilder {
         !this.#config.enableSpa && hasIsland
           ? `<script id="island-props">${JSON.stringify(
               propsData
-            )}</script><script type="module" src="/${injectIslandsPath}"></script>`
+            )}</script><script type="module" src="${withBaseUrl(
+              injectIslandsPath
+            )}"></script>`
           : ''
       }
       ${
         this.#config.enableSpa
-          ? `<script type="module" src="/${clientChunk.fileName}"></script>`
+          ? `<script type="module" src="${withBaseUrl(
+              clientChunk.fileName!
+            )}"></script>`
           : `<script type="module">${clientChunk.code}</script>`
       }
     </body>
diff --git a/packages/island/src/node/plugin-routes/RouteService.ts b/packages/island/src/node/plugin-routes/RouteService.ts
@@ -5,7 +5,7 @@ import { RUNTIME_BUNDLE_OUTDIR } from '../constants';
 import path from 'path';
 import { DEFAULT_EXCLUDE, DEFAULT_PAGE_EXTENSIONS } from '.';
 import { RouteOptions } from 'shared/types';
-import { normalizeSlash } from '../../shared/utils';
+import { withBase } from '../../shared/utils';
 
 export interface RouteMeta {
   routePath: string;
@@ -59,12 +59,7 @@ export class RouteService {
   ): string | undefined {
     const fileRelativePath = path.relative(root, filePath);
     const routePath = normalizeRoutePath(fileRelativePath);
-    return RouteService.withBase(routePath, base);
-  }
-
-  static withBase(url: string, base: string) {
-    const normalizedBase = normalizeSlash(base);
-    return normalizedBase ? `${normalizedBase}${url}` : url;
+    return withBase(routePath, base);
   }
 
   addRoute(filePath: string) {
@@ -131,7 +126,7 @@ ${this.#routeData
      *   filePath: '/Users/xxx/xxx/index.md'
      * }
      */
-    return `{ path: '${RouteService.withBase(
+    return `{ path: '${withBase(
       route.routePath,
       this.#base
     )}', element: React.createElement(${component}), filePath: '${
diff --git a/packages/island/src/node/serve.ts b/packages/island/src/node/serve.ts
@@ -45,7 +45,7 @@ export async function serve(root: string, cliOptions: CLIServeOption) {
 
   if (base) {
     polka({ onNoMatch })
-      .use(base, compress, serve)
+      .use(base, serve)
       .listen(port, host, (err: Error) => {
         if (err) throw err;
         console.log(`Built site served at http://${host}:${port}/${base}/\n`);
diff --git a/packages/island/src/shared/utils/index.ts b/packages/island/src/shared/utils/index.ts
@@ -17,3 +17,9 @@ export function removeTrailingSlash(url: string) {
 export function normalizeSlash(url: string) {
   return removeTrailingSlash(addLeadingSlash(url));
 }
+
+export function withBase(url: string, base: string) {
+  const normalizedBase = normalizeSlash(base);
+  const normalizedUrl = normalizeSlash(url);
+  return normalizedBase ? `${normalizedBase}${normalizedUrl}` : normalizedUrl;
+}
