feat: supported sub path deployment #68

Author: 0xJacky

frontend/.env.development

@@ -1 +1 @@
-VITE_API_ROOT = /api
+VITE_API_ROOT=/api

frontend/.env.production

@@ -1 +1 @@
-VITE_API_ROOT = /api
+VITE_API_ROOT=api

frontend/src/lib/helper/index.ts

@@ -31,7 +31,18 @@ function downloadCsv(header: any, data: any[], fileName: string) {
     window.URL.revokeObjectURL(csvContent)
 }
 
+const urlJoin = (...args: string[]) =>
+    args
+        .join('/')
+        .replace(/[\/]+/g, '/')
+        .replace(/^(.+):\//, '$1://')
+        .replace(/^file:/, 'file:/')
+        .replace(/\/(\?|&|#[^!])/g, '$1')
+        .replace(/\?/g, '&')
+        .replace('&', '?')
+
 export {
     bytesToSize,
-    downloadCsv
+    downloadCsv,
+    urlJoin
 }

frontend/src/lib/http/index.ts

@@ -19,14 +19,14 @@ let instance = axios.create({
             headers['Content-Type'] = 'application/json'
         }
         return JSON.stringify(data)
-    }],
+    }]
 })
 
 
 instance.interceptors.request.use(
     config => {
         if (token) {
-            (config.headers || {}).Authorization = token.value
+            (config.headers as any).Authorization = token.value
         }
         return config
     },

frontend/src/lib/websocket/index.ts

@@ -1,6 +1,7 @@
 import ReconnectingWebSocket from 'reconnecting-websocket'
 import {useUserStore} from '@/pinia'
 import {storeToRefs} from 'pinia'
+import {urlJoin} from '@/lib/helper'
 
 
 function ws(url: string, reconnect: boolean = true): ReconnectingWebSocket | WebSocket {
@@ -9,7 +10,8 @@ function ws(url: string, reconnect: boolean = true): ReconnectingWebSocket | Web
 
     const protocol = location.protocol === 'https:' ? 'wss://' : 'ws://'
 
-    const _url = protocol + window.location.host + url + '?token=' + btoa(token.value)
+    const _url = urlJoin(protocol + window.location.host, window.location.pathname,
+        url, '?token=' + btoa(token.value))
 
     if (reconnect) {
         return new ReconnectingWebSocket(_url)

frontend/src/routes/index.ts

@@ -1,4 +1,4 @@
-import {createRouter, createWebHistory} from 'vue-router'
+import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
 import gettext from '../gettext'
 import {useUserStore} from '@/pinia'
 
@@ -169,7 +169,7 @@ export const routes = [
 ]
 
 const router = createRouter({
-    history: createWebHistory(),
+    history: createWebHashHistory(),
     // @ts-ignore
     routes: routes
 })

frontend/src/version.json

@@ -1 +1 @@
-{"version":"1.7.2","build_id":67,"total_build":137}
+{"version":"1.7.2","build_id":73,"total_build":143}

frontend/src/views/dashboard/DashBoard.vue

@@ -7,11 +7,11 @@ import {onMounted, onUnmounted, reactive, ref} from 'vue'
 import analytic from '@/api/analytic'
 import ws from '@/lib/websocket'
 import {bytesToSize} from '@/lib/helper'
+import ReconnectingWebSocket from 'reconnecting-websocket'
 
 const {$gettext} = useGettext()
 
-const websocket = ws('/api/analytic')
-websocket.onmessage = wsOnMessage
+let websocket: ReconnectingWebSocket | WebSocket
 
 const host = reactive({})
 const cpu = ref('0.0')
@@ -61,6 +61,9 @@ onMounted(() => {
         disk_io_analytic[0].data = disk_io_analytic[0].data.concat(r.disk_io.writes)
         disk_io_analytic[1].data = disk_io_analytic[1].data.concat(r.disk_io.reads)
 
+        websocket = ws('api/analytic')
+        websocket.onmessage = wsOnMessage
+
     })
 })
 

frontend/version.json

@@ -1 +1 @@
-{"version":"1.7.2","build_id":67,"total_build":137}
+{"version":"1.7.2","build_id":73,"total_build":143}

frontend/vite.config.ts

@@ -9,6 +9,7 @@ import vitePluginBuildId from 'vite-plugin-build-id'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    base: './',
     resolve: {
         alias: {
             '@': fileURLToPath(new URL('./src', import.meta.url))