feat: configure router mode and base URL via environment variablesHEADmain

1 files changed, 36 insertions, 22 deletions

diff --git a/vite.config.ts b/vite.config.ts
index c012b56..6771fca 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,30 +1,44 @@
 import react from '@vitejs/plugin-react'
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import macros from 'unplugin-parcel-macros';
 import optimizeLocales from '@react-aria/optimize-locales-plugin';
 
 // https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-    macros.vite(), // Must be first!
-    react(),
-    {
-      ...optimizeLocales.vite({ locales: ['en-US', 'zh-CN'] }),
-      enforce: 'pre'
-    }
-  ],
-  build: {
-    target: ['es2022'],
-    // Lightning CSS produces a much smaller CSS bundle than the default minifier.
-    cssMinify: 'lightningcss',
-    rollupOptions: {
-      output: {
-        // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
-        // Because atomic CSS has so much overlap between components, loading all CSS up front results in
-        // smaller bundles instead of producing duplication between pages.
-        manualChunks(id) {
-          if (/macro-(.*)\.css$/.test(id) || /@react-spectrum\/s2\/.*\.css$/.test(id)) {
-            return 's2-styles';
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  const routerMode = env.VITE_ROUTER_MODE ?? 'history'
+  const base = env.VITE_BASE_URL ?? '/'
+
+  if (routerMode !== 'hash' && routerMode !== 'history') {
+    throw new Error('VITE_ROUTER_MODE must be "hash" or "history".')
+  }
+  if (!base.startsWith('/') || base.startsWith('//') || /[?#\\\s]/.test(base)) {
+    throw new Error('VITE_BASE_URL must be an absolute pathname, such as "/" or "/app/".')
+  }
+
+  return {
+    base: base.endsWith('/') ? base : `${base}/`,
+    plugins: [
+      macros.vite(), // Must be first!
+      react(),
+      {
+        ...optimizeLocales.vite({ locales: ['en-US', 'zh-CN'] }),
+        enforce: 'pre'
+      }
+    ],
+    build: {
+      target: ['es2022'],
+      // Lightning CSS produces a much smaller CSS bundle than the default minifier.
+      cssMinify: 'lightningcss',
+      rollupOptions: {
+        output: {
+          // Bundle all S2 and style-macro generated CSS into a single bundle instead of code splitting.
+          // Because atomic CSS has so much overlap between components, loading all CSS up front results in
+          // smaller bundles instead of producing duplication between pages.
+          manualChunks(id) {
+            if (/macro-(.*)\.css$/.test(id) || /@react-spectrum\/s2\/.*\.css$/.test(id)) {
+              return 's2-styles';
+            }
           }
         }
       }