Support configurable base path deployment

Author: gudaoxuri

README.md

@@ -57,6 +57,16 @@ npm install
 npm run build
 ```
 
+#### Serving from a sub-path
+
+If you need the app to live under a path prefix (for example `/drawdb`), set `VITE_BASE_PATH` before building or previewing:
+
+```bash
+VITE_BASE_PATH=/drawdb npm run build
+```
+
+All generated asset links and client-side routes will then resolve relative to `/drawdb`. Make sure your web server rewrites unknown paths back to the built `index.html` so the SPA router can handle them.
+
 ### Docker Build
 
 ```bash

src/App.jsx

@@ -8,9 +8,11 @@ import SettingsContextProvider from "./context/SettingsContext";
 import NotFound from "./pages/NotFound";
 
 export default function App() {
+  const basename = import.meta.env.BASE_URL.replace(/\/$/, "");
+
   return (
     <SettingsContextProvider>
-      <BrowserRouter>
+      <BrowserRouter basename={basename || undefined}>
         <RestoreScroll />
         <Routes>
           <Route path="/" element={<LandingPage />} />

vite.config.js

@@ -1,7 +1,13 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react";
 
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), "");
+  const rawBase = env.VITE_BASE_PATH || "/";
+  const base = rawBase.endsWith("/") ? rawBase : `${rawBase}/`;
+
+  return {
+    base,
+    plugins: [react()],
+  };
+});