Fix: serverConfig.json fetching behavior across nested routes

.gitignore

@@ -22,4 +22,3 @@ tests/**/coverage/
 *.njsproj
 *.sln
 tsconfig.tsbuildinfo
-.vscode/settings.json

.vscode/settings.json

@@ -25,7 +25,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "iconify.excludes": ["el"],
   "cSpell.words": ["iconify", "Qrcode"]

src/config/index.ts

@@ -1,8 +1,8 @@
 import { App } from "vue";
 import axios from "axios";
+import { configConver } from "@/utils/rootConver";
 
 let config: object = {};
-const { VITE_PUBLIC_PATH } = import.meta.env;
 
 const setConfig = (cfg?: unknown) => {
   config = Object.assign(config, cfg);
@@ -31,7 +31,7 @@ export const getServerConfig = async (app: App): Promise<undefined> => {
   app.config.globalProperties.$config = getConfig();
   return axios({
     method: "get",
-    url: `${VITE_PUBLIC_PATH}serverConfig.json`
+    url: `${configConver()}serverConfig.json`
   })
     .then(({ data: config }) => {
       let $config = app.config.globalProperties.$config;

src/utils/rootConver.ts

@@ -0,0 +1,22 @@
+const { VITE_PUBLIC_PATH } = import.meta.env;
+
+export const configConver = () => {
+  if (VITE_PUBLIC_PATH === "./") {
+    return window.location.origin + "/";
+  }
+  return window.location.origin + processPath(VITE_PUBLIC_PATH);
+};
+
+function processPath(str: string): string {
+  if (str.startsWith("./")) {
+    str = str.substring(1);
+  } else if (!str.startsWith("/")) {
+    str = "/" + str;
+  }
+
+  if (!str.endsWith("/")) {
+    str += "/";
+  }
+
+  return str;
+}