'admin-21.02.24:处理后端控制路由问题、修改tsconfig.json等'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-admin-wonderful-next",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build"
@@ -30,7 +30,7 @@
     "dotenv": "^8.2.0",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
-    "typescript": "^4.1.5",
+    "typescript": "^4.2.2",
-    "vite": "^2.0.1"
+    "vite": "^2.0.2"
   }
-}
+}

src/api/menu/testMenu.json

@@ -5,7 +5,7 @@
         {
             "path": "/home",
             "name": "home",
-            "component": "'/@/views/home/index.vue'",
+            "component": "home/index",
             "meta": {
                 "title": "首页",
                 "isLink": "",

src/router/index.ts

@@ -476,27 +476,67 @@ const router = createRouter({
 export function getBackEndControlRoutes() {
     getMenuTest().then((res: any) => {
         console.log(JSON.parse(JSON.stringify(res)));
-        console.log(backEndRouter(res.data))
+        // console.log(backEndRouter(res.data))
         dynamicRoutes[0].children = backEndRouter(res.data)
+        dynamicRoutes[0].children = res.data
         console.log(dynamicRoutes)
         // initAllFun()
         store.dispatch('setUserInfos')
         setAddRoute() // 添加动态路由
         setFilterMenu() // 过滤权限菜单
         setCacheTagsViewRoutes() // 添加 keepAlive 缓存
-        console.log(router.getRoutes())
+        // console.log(router.getRoutes())
     });
 }
 
+// export function loadView(path: string) {
+//     return () => import(`../views/${path}.vue`)
+// }
+
 // 后端控制路由，递归处理每一项 `component` 中的路径
+// export function backEndRouter(routes: any) {
+//     if (!routes) return false
+//     return routes.map((v: any) => {
+//         if (v.component) v.component = () => import(`../views${v.component}.vue`)
+//         if (v.children) v.children = backEndRouter(v.children)
+//         return v
+//     })
+// }
+
+const dynamicViewsModules = import.meta.glob('../views/**/*.{vue,tsx}');
+
+console.log(dynamicViewsModules)
+
+
 export function backEndRouter(routes: any) {
-    if (!routes) return false
+    if (!routes) return;
-    return routes.map((v: any) => {
+    return routes.forEach((item: any) => {
-        // if (v.component) v.component = () => import(`/@/views/${v.component}.vue`)
+        const { component } = item;
-        if (v.component) v.component = () => import(v.component)
+        const { children } = item;
-        if (v.children) v.children = backEndRouter(v.children)
+        if (component) item.component = dynamicImport(dynamicViewsModules, component as string);
-        return v
+        children && backEndRouter(children);
-    })
+        return item
+    });
+}
+
+export function dynamicImport(
+    dynamicViewsModules: Record<string, () => Promise<{ [key: string]: any; }>>,
+    component: string
+) {
+    const keys = Object.keys(dynamicViewsModules);
+    const matchKeys = keys.filter((key) => {
+        const k = key.replace('../views', '');
+        return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
+    });
+    console.log(matchKeys)
+    if (matchKeys?.length === 1) {
+        const matchKey = matchKeys[0];
+        return dynamicViewsModules[matchKey];
+    }
+    if (matchKeys?.length > 1) {
+        console.warn('Please do not create');
+        return false;
+    }
 }
 
 // 多级嵌套数组处理成一维数组
@@ -602,10 +642,12 @@ export function resetRoute() {
 export function initAllFun() {
     const token = getSession('token')
     if (!token) return false
-    store.dispatch('setUserInfos')
+    setTimeout(() => {
-    setAddRoute() // 添加动态路由
+        store.dispatch('setUserInfos')
-    setFilterMenu() // 过滤权限菜单
+        setAddRoute() // 添加动态路由
-    setCacheTagsViewRoutes() // 添加 keepAlive 缓存
+        setFilterMenu() // 过滤权限菜单
+        setCacheTagsViewRoutes() // 添加 keepAlive 缓存
+    }, 1000)
 }
 
 // 初始化方法执行

src/utils/themeConfig.ts

@@ -39,5 +39,5 @@ export default {
     animation: 'slideRight',
     columnsAsideStyle: 'columnsRound',
     layout: 'defaults',
-    isRequestRoutes: true
+    isRequestRoutes: false
 }

src/views/layout/index.vue

@@ -6,16 +6,31 @@
 </template>
 
 <script lang="ts">
-import { computed, onBeforeMount, onUnmounted, getCurrentInstance } from "vue";
+import {
+  computed,
+  onBeforeMount,
+  onUnmounted,
+  getCurrentInstance,
+  defineAsyncComponent,
+} from "vue";
 import { useStore } from "/@/store/index.ts";
 import { getLocal } from "/@/utils/storage.ts";
-import Defaults from "/@/views/layout/main/defaults.vue";
-import Classic from "/@/views/layout/main/classic.vue";
-import Transverse from "/@/views/layout/main/transverse.vue";
-import Columns from "/@/views/layout/main/columns.vue";
 export default {
   name: "layout",
-  components: { Defaults, Classic, Transverse, Columns },
+  components: {
+    Defaults: defineAsyncComponent(
+      () => import("/@/views/layout/main/defaults.vue")
+    ),
+    Classic: defineAsyncComponent(
+      () => import("/@/views/layout/main/classic.vue")
+    ),
+    Transverse: defineAsyncComponent(
+      () => import("/@/views/layout/main/transverse.vue")
+    ),
+    Columns: defineAsyncComponent(
+      () => import("/@/views/layout/main/columns.vue")
+    ),
+  },
   setup() {
     const { proxy } = getCurrentInstance();
     const store = useStore();

tsconfig.json

@@ -4,12 +4,12 @@
 
     /* Basic Options */
     // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
-    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "module": "esnext" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
@@ -25,7 +25,7 @@
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
-    "strict": true,                           /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
@@ -42,14 +42,16 @@
     // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
 
     /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    "baseUrl": "." /* Base directory to resolve non-absolute module names. */,
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
+    "types": [
-    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+      "vite/client"
-    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    ] /* Type declaration files to be included in compilation. */,
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
     // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
     // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
 
@@ -64,7 +66,7 @@
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
 
     /* Advanced Options */
-    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
-    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
   }
 }