升级到vite3，速度非常快

2025-09-02 19:02:52 +00:00 · 2022-11-13 21:23:31 +08:00
parent c919f17c1e
commit 118e2248cc
9 changed files with 83 additions and 82 deletions
--- a/smart-admin-web/javascript-ant-design-vue3/package.json
+++ b/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-plugin-mock": "~2.9.6",
-    "vite-plugin-optimize-persist": "^0.1.2",
-    "vite-plugin-package-config": "^0.1.1",
+    "vite": "^3.2.3",
    "vue-eslint-parser": "~9.0.2"
  },
  "engines": {
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/recursion-menu.vue
+++ b/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) {
-    router.push({ name: route.menuId.toString() });
+  function turnToPage(menu) {
+    router.push({ path: menu.path });
  }

  /**
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/components/side-menu/sub-menu.vue
+++ b/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) => {
-    emits('turnToPage', route);
+  const turnToPage = (menu) => {
+    emits('turnToPage', menu);
  };
 </script>
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-help-doc-layout.vue
+++ b/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;
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-expand-layout.vue
+++ b/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 }">
-          <keep-alive :include="keepAliveIncludes">
-            <div :key="route.name" style="height:100%">
-              <component :is="Component" />
-            </div>
-          </keep-alive>
-        </router-view>
+        <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>
--- a/smart-admin-web/javascript-ant-design-vue3/src/layout/smart-side-layout.vue
+++ b/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 }">
-          <keep-alive :include="keepAliveIncludes">
-            <div :key="route.name" style="height: 100%">
-              <component :is="Component" />
-            </div>
-          </keep-alive>
-        </router-view>
+        <div v-show="!iframeNotKeepAlivePageFlag && keepAliveIframePages.every((e) => route.name != e.name)">
+          <router-view v-slot="{ Component }">
+            <keep-alive :include="keepAliveIncludes">
+              <component :is="Component" :key="route.name" />
+            </keep-alive>
+          </router-view>
+        </div>
      </a-layout-content>

      <!-- footer 版权公司信息 -->
--- a/smart-admin-web/javascript-ant-design-vue3/src/router/index.js
+++ b/smart-admin-web/javascript-ant-design-vue3/src/router/index.js
@@ -12,12 +12,13 @@ import 'nprogress/nprogress.css';
 import { nextTick } from 'vue';
 import { createRouter, createWebHashHistory } from 'vue-router';
 import { routerArray } from './routers';
-import { PAGE_PATH_404,  PAGE_PATH_LOGIN } from '/@/constants/common-const';
+import { PAGE_PATH_404, PAGE_PATH_LOGIN } from '/@/constants/common-const';
 import { HOME_PAGE_NAME } from '/@/constants/system/home-const';
 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唯一标识
-      name: menuIdStr,
+      // 使用【组件文件名+menuId】作为name唯一标识
+      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');
-      resList.push(route);
-      continue;
-    }
-
-    let componentPath = e.component && e.component.startsWith('/') ? e.component : '/' + e.component;
-    let relativePath = `../views${componentPath}`;
-    // eslint-disable-next-line no-prototype-builtins
-    if (modules.hasOwnProperty(relativePath)) {
+      route.component = () => import('../components/framework/iframe/iframe-index.vue');
+      
+    } else {
+      let componentPath = e.component && e.component.startsWith('/') ? e.component : '/' + e.component;
+      let relativePath = `../views${componentPath}`;
+      // // eslint-disable-next-line no-prototype-builtins
      route.component = modules[relativePath];
-      // 组件注入name
-      let eager = modulesEager[relativePath];
-      if (eager) {
-        eager.default.name = menuIdStr;
-      }
    }
-    resList.push(route);
+    routerList.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,
  });
 }
--- a/smart-admin-web/javascript-ant-design-vue3/src/theme/index.less
+++ b/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;
-@base-bg-color: @body-background;
+/**********************************  ant design vue 颜色变量 end **********************************/
+
+/**********************************  页面头部 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 **********************************/

 /**********************************  基础样式 **********************************/
 * {
--- a/smart-admin-web/javascript-ant-design-vue3/vite.config.js
+++ b/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'],