v2.0 更新vite3.2.3，速度非常快

smart-admin-web/javascript-ant-design-vue3/package.json

@@ -43,7 +43,7 @@
     "vue3-json-viewer": "^2.2.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "~2.3.3",
+    "@vitejs/plugin-vue": "^3.2.0",
     "@vue/compiler-sfc": "~3.2.26",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "~8.5.0",
@@ -57,10 +57,7 @@
     "stylelint-config-prettier": "~9.0.3",
     "stylelint-config-standard": "~25.0.0",
     "stylelint-order": "~5.0.0",
-    "vite": "~2.9.9",
+    "vite": "^3.2.3",
-    "vite-plugin-mock": "~2.9.6",
-    "vite-plugin-optimize-persist": "^0.1.2",
-    "vite-plugin-package-config": "^0.1.1",
     "vue-eslint-parser": "~9.0.2"
   },
   "engines": {

smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/recursion-menu.vue

@@ -59,8 +59,8 @@
   const openKeys = ref([]);
 
   // 页面跳转
-  function turnToPage(route) {
+  function turnToPage(menu) {
-    router.push({ name: route.menuId.toString() });
+    router.push({ path: menu.path });
   }
 
   /**

smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/sub-menu.vue

@@ -39,7 +39,7 @@
   });
 
   const emits = defineEmits(['turnToPage']);
-  const turnToPage = (route) => {
+  const turnToPage = (menu) => {
-    emits('turnToPage', route);
+    emits('turnToPage', menu);
   };
 </script>

smart-admin-web/javascript-ant-design-vue3/src/layout/smart-help-doc-layout.vue

@@ -226,7 +226,7 @@
   }
 
   .layout-header {
-    background: @primary-7;
+    background: @primary-color;
     padding: 0;
     z-index: 999;
     color: white;

smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-expand-layout.vue

@@ -56,13 +56,15 @@
           :url="item.meta.frameUrl"
         />
         <!--非iframe使用router-view-->
-        <router-view v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)" v-slot="{ Component }">
+        <div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)">
+          <router-view v-slot="{ Component }">
             <keep-alive :include="keepAliveIncludes">
               <div :key="route.name" style="height: 100%">
                 <component :is="Component" />
               </div>
             </keep-alive>
           </router-view>
+        </div>
       </a-layout-content>
       <!-- footer 版权公司信息 -->
       <a-layout-footer class="smart-layout-footer" v-show="footerFlag"> <SmartFooter /></a-layout-footer>

smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-layout.vue

@@ -47,13 +47,13 @@
           :url="item.meta.frameUrl"
         />
         <!--非iframe使用router-view-->
-        <router-view v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)" v-slot="{ Component }">
+        <div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)">
+          <router-view v-slot="{ Component }">
             <keep-alive :include="keepAliveIncludes">
-            <div :key="route.name" style="height: 100%">
+              <component :is="Component" :key="route.name" />
-              <component :is="Component" />
-            </div>
             </keep-alive>
           </router-view>
+        </div>
       </a-layout-content>
 
       <!-- footer 版权公司信息 -->

smart-admin-web/javascript-ant-design-vue3/src/router/index.js

@@ -18,6 +18,7 @@ import SmartLayout from '/@/layout/smart-layout.vue';
 import { useUserStore } from '/@/store/modules/system/user';
 import { clearAllCoolies, getTokenFromCookie } from '/@/utils/cookie-util';
 import { localClear } from '/@/utils/local-util';
+import lodash from 'lodash';
 
 export const router = createRouter({
   history: createWebHashHistory(),
@@ -52,6 +53,18 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
 
+  // 下载路由对应的 页面组件，并修改组件的Name，如果修改过，则不需要修改
+  let toRouterInfo = routerMap.get(to.name);
+  if (toRouterInfo && lodash.isFunction(toRouterInfo.component) && toRouterInfo.meta.renameComponentFlag === false) {
+    // 因为组件component 为 lazy load是个方法，所以可以直接执行 component()方法
+    toRouterInfo.component().then((val) => {
+      // 修改组件的name
+      val.default.name = to.meta.componentName;
+      // 记录已经修改过 组件的name
+      toRouterInfo.meta.renameComponentFlag = true;
+    });
+  }
+
   // 是否刷新缓存
   // 当前路由是否在tag中 存在tag中且没有传递keepAlive则刷新缓存
   let findTag = (useUserStore().tagNav || []).find((e) => e.menuName == to.name);
@@ -62,10 +75,10 @@ router.beforeEach(async (to, from, next) => {
   // 设置keepAlive 或 删除KeepAlive
   if (to.meta.keepAlive) {
     if (reloadKeepAlive) {
-      useUserStore().deleteKeepAliveIncludes(to.name?.toString());
+      useUserStore().deleteKeepAliveIncludes(to.meta.componentName);
     }
     nextTick(() => {
-      useUserStore().pushKeepAliveIncludes(to.name?.toString());
+      useUserStore().pushKeepAliveIncludes(to.meta.componentName);
     });
   }
   next();
@@ -77,17 +90,18 @@ router.afterEach(() => {
 });
 
 // ----------------------- 构建router对象 -----------------------
+const routerMap = new Map();
+
 export function buildRoutes(menuRouterList) {
   let menuList = menuRouterList ? menuRouterList : useUserStore().getMenuRouterList || [];
   /**
    * 1、构建整个路由信息
    * 2、添加到路由里
    */
-  const resList = [];
+  const routerList = [];
   // 获取所有vue组件引用地址 用于构建路由
   const modules = import.meta.glob('../views/**/**.vue');
   // 获取所有vue组件 用于注入name属性 name属性用于keep-alive
-  const modulesEager = import.meta.globEager('../views/**/**.vue');
 
   //1、构建整个路由信息
   for (const e of menuList) {
@@ -97,15 +111,26 @@ export function buildRoutes(menuRouterList) {
     if (!e.path) {
       continue;
     }
-    if (e.deletedFlag && e.deletedFlag === 1) {
+    if (e.deletedFlag && e.deletedFlag === true) {
       continue;
     }
-    let menuIdStr = e.menuId.toString();
+    let componentName = e.menuId.toString();
+    if (e.component) {
+      let lastIndex = e.component.lastIndexOf('/');
+      let fileName = lodash.camelCase(e.component.substring(lastIndex + 1, e.component.length));
+      componentName = lodash.camelCase(fileName) + componentName;
+      componentName = lodash.upperFirst(componentName);
+    }
+
     let route = {
       path: e.path.startsWith('/') ? e.path : `/${e.path}`,
-      // 使用menuId作为name唯一标识
+      // 使用【组件文件名+menuId】作为name唯一标识
-      name: menuIdStr,
+      name: e.menuId.toString(),
       meta: {
+        // 数据库菜单(页面)id
+        id: e.menuId.toString(),
+        // 组件名称
+        componentName: componentName,
         // 菜单展示
         title: e.menuName,
         // 菜单图标展示
@@ -118,27 +143,22 @@ export function buildRoutes(menuRouterList) {
         frameFlag: e.frameFlag,
         // 外链地址
         frameUrl: e.frameUrl,
+        // 是否 rename了组件的名字
+        renameComponentFlag: false,
       },
     };
 
     if (e.frameFlag) {
-      route.component = () => import('../components/framework/iframe/route-default-component.vue');
+      route.component = () => import('../components/framework/iframe/iframe-index.vue');
-      resList.push(route);
-      continue;
-    }
       
+    } else {
       let componentPath = e.component && e.component.startsWith('/') ? e.component : '/' + e.component;
       let relativePath = `../views${componentPath}`;
-    // eslint-disable-next-line no-prototype-builtins
+      // // eslint-disable-next-line no-prototype-builtins
-    if (modules.hasOwnProperty(relativePath)) {
       route.component = modules[relativePath];
-      // 组件注入name
-      let eager = modulesEager[relativePath];
-      if (eager) {
-        eager.default.name = menuIdStr;
     }
-    }
+    routerList.push(route);
-    resList.push(route);
+    routerMap.set(e.menuId.toString(), route);
   }
 
   //2、添加到路由里
@@ -146,6 +166,6 @@ export function buildRoutes(menuRouterList) {
     path: '/',
     meta: {},
     component: SmartLayout,
-    children: resList,
+    children: routerList,
   });
 }

smart-admin-web/javascript-ant-design-vue3/src/theme/index.less

@@ -8,46 +8,31 @@
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
  */
 
-@import '~ant-design-vue/dist/antd.less';
+@import 'ant-design-vue/dist/antd.css';
 @import './smart-admin.less';
 
-@gray-1: #ffffff;
-@gray-2: #fafafa;
-@gray-3: #f5f5f5;
-@gray-4: #f0f0f0;
-@gray-5: #d9d9d9;
-@gray-6: #bfbfbf;
-@gray-7: #8c8c8c;
-@gray-8: #595959;
-@gray-9: #434343;
-@gray-10: #262626;
-@gray-11: #1f1f1f;
-@gray-12: #141414;
-@gray-13: #000000;
 
-@title-color: @heading-color;
+/**********************************  ant design vue 颜色变量 begin **********************************/
+@primary-color:#1890ff;
+@success-color: #52c41a; // 成功色
+@error-color :#f5222d; // 错误色
+@text-color:rgba(0, 0, 0, 0.65); // 主文本色
+@text-color-secondary:rgba(0, 0, 0, 0.45); // 次文本色
+@primary-7: #1890ff;
+@base-bg-color: #fff;
+@shadow-color:rgba(0, 0, 0, 0.15);
 
-@layout-bg-color: @layout-body-background;
+/**********************************  ant design vue 颜色变量 end **********************************/
-@base-bg-color: @body-background;
+
+/**********************************  页面头部 begin **********************************/
 @hover-bg-color: rgba(0, 0, 0, 0.025);
-@border-color: @border-color-split;
-
-@hover-bg-color-light: @hover-bg-color;
-@hover-bg-color-dark: @primary-7;
 @hover-bg-color-night: rgba(255, 255, 255, 0.025);
-@header-bg-color-dark: @layout-header-background;
-
 @header-light-bg-hover-color: #f6f6f6;
 @header-height: 80px;
 @header-user-height: 40px;
 @page-tag-height: 40px;
-
-@shadow-down: @shadow-1-down;
-@shadow-up: @shadow-1-up;
-@shadow-left: @shadow-1-left;
-@shadow-right: @shadow-1-right;
-
 @theme-list: light, dark, night;
+/**********************************  页面头部 end **********************************/
 
 /**********************************  基础样式 **********************************/
 * {

smart-admin-web/javascript-ant-design-vue3/vite.config.js

@@ -9,9 +9,6 @@
  */
 import { resolve } from 'path';
 import vue from '@vitejs/plugin-vue';
-//提速第一次vite启动速度
-import OptimizationPersist from 'vite-plugin-optimize-persist';
-import PkgConfig from 'vite-plugin-package-config';
 
 const pathResolve = (dir) => {
   return resolve(__dirname, '.', dir);
@@ -42,7 +39,7 @@ export default {
     host: '0.0.0.0',
     port: 8081,
   },
-  plugins: [vue(), PkgConfig(), OptimizationPersist()],
+  plugins: [vue()],
   optimizeDeps: {
     include: ['ant-design-vue/es/locale/zh_CN', 'dayjs/locale/zh-cn', 'ant-design-vue/es/locale/en_US'],
     exclude: ['vue-demi'],