perf: Pack on demand

package-lock.json

@@ -762,6 +762,16 @@
       "integrity": "sha1-RdXbmefuXmvE82LgCL+RerUEmIc=",
       "dev": true
     },
+    "camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dev": true,
+      "requires": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "camelcase": {
       "version": "6.2.0",
       "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-6.2.0.tgz",
@@ -774,6 +784,17 @@
       "integrity": "sha1-qZkBSjXOvU+YxAWTCgV6DXU1Lrk=",
       "dev": true
     },
+    "capital-case": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
+      "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1604053731560&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
@@ -784,6 +805,26 @@
         "supports-color": "^5.3.0"
       }
     },
+    "change-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz",
+      "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==",
+      "dev": true,
+      "requires": {
+        "camel-case": "^4.1.2",
+        "capital-case": "^1.0.4",
+        "constant-case": "^3.0.4",
+        "dot-case": "^3.0.4",
+        "header-case": "^2.0.4",
+        "no-case": "^3.0.4",
+        "param-case": "^3.0.4",
+        "pascal-case": "^3.1.2",
+        "path-case": "^3.0.4",
+        "sentence-case": "^3.0.4",
+        "snake-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "chokidar": {
       "version": "3.5.1",
       "resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-3.5.1.tgz?cache=0&sync_timestamp=1610719380575&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchokidar%2Fdownload%2Fchokidar-3.5.1.tgz",
@@ -862,6 +903,17 @@
         "bluebird": "^3.7.2"
       }
     },
+    "constant-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz",
+      "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case": "^2.0.2"
+      }
+    },
     "convert-source-map": {
       "version": "1.7.0",
       "resolved": "https://registry.npm.taobao.org/convert-source-map/download/convert-source-map-1.7.0.tgz",
@@ -929,6 +981,16 @@
       "integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=",
       "dev": true
     },
+    "dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "dotenv": {
       "version": "8.2.0",
       "resolved": "https://registry.npm.taobao.org/dotenv/download/dotenv-8.2.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdotenv%2Fdownload%2Fdotenv-8.2.0.tgz",
@@ -996,6 +1058,12 @@
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
       "dev": true
     },
+    "es-module-lexer": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz",
+      "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==",
+      "dev": true
+    },
     "es5-ext": {
       "version": "0.10.53",
       "resolved": "https://registry.npm.taobao.org/es5-ext/download/es5-ext-0.10.53.tgz",
@@ -1230,6 +1298,16 @@
       "integrity": "sha1-gdAbtd6OpKIUrV1urRtSNGCwtFo=",
       "dev": true
     },
+    "header-case": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
+      "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
+      "dev": true,
+      "requires": {
+        "capital-case": "^1.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "html-tags": {
       "version": "3.1.0",
       "resolved": "https://registry.npm.taobao.org/html-tags/download/html-tags-3.1.0.tgz",
@@ -1374,6 +1452,15 @@
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
     "lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npm.taobao.org/lru-cache/download/lru-cache-5.1.1.tgz",
@@ -1464,6 +1551,16 @@
       "resolved": "https://registry.npm.taobao.org/next-tick/download/next-tick-1.0.0.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
     },
+    "no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "requires": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node-releases": {
       "version": "1.1.71",
       "resolved": "https://registry.npm.taobao.org/node-releases/download/node-releases-1.1.71.tgz?cache=0&sync_timestamp=1614110416015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnode-releases%2Fdownload%2Fnode-releases-1.1.71.tgz",
@@ -1501,12 +1598,32 @@
         "ee-first": "1.1.1"
       }
     },
+    "param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dev": true,
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npm.taobao.org/parseurl/download/parseurl-1.3.3.tgz",
       "integrity": "sha1-naGee+6NEt/wUT7Vt2lXeTvC6NQ=",
       "dev": true
     },
+    "pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "path": {
       "version": "0.12.7",
       "resolved": "https://registry.npm.taobao.org/path/download/path-0.12.7.tgz",
@@ -1516,6 +1633,16 @@
         "util": "^0.10.3"
       }
     },
+    "path-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz",
+      "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==",
+      "dev": true,
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npm.taobao.org/path-parse/download/path-parse-1.0.6.tgz",
@@ -1739,6 +1866,27 @@
       "integrity": "sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0=",
       "dev": true
     },
+    "sentence-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz",
+      "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==",
+      "dev": true,
+      "requires": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3",
+        "upper-case-first": "^2.0.2"
+      }
+    },
+    "snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "requires": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "sortablejs": {
       "version": "1.10.2",
       "resolved": "https://registry.npm.taobao.org/sortablejs/download/sortablejs-1.10.2.tgz",
@@ -1839,6 +1987,24 @@
       "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
       "dev": true
     },
+    "upper-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
+      "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "upper-case-first": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz",
+      "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.0.3"
+      }
+    },
     "util": {
       "version": "0.10.4",
       "resolved": "https://registry.npm.taobao.org/util/download/util-0.10.4.tgz",
@@ -1960,6 +2126,40 @@
         }
       }
     },
+    "vite-plugin-style-import": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-style-import/-/vite-plugin-style-import-0.9.2.tgz",
+      "integrity": "sha512-YjPtKzr5WSwAQW6UD7DBtCraxJ4X7pQXUdBOYriowz223n3W3T2RscUs7CxzAhGDEG/ttcc6vvA6A5/eVowRTw==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^4.1.0",
+        "change-case": "^4.1.2",
+        "debug": "^4.3.2",
+        "es-module-lexer": "^0.4.1",
+        "magic-string": "^0.25.7"
+      },
+      "dependencies": {
+        "@rollup/pluginutils": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz",
+          "integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==",
+          "dev": true,
+          "requires": {
+            "estree-walker": "^2.0.1",
+            "picomatch": "^2.2.2"
+          }
+        },
+        "debug": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
+          "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        }
+      }
+    },
     "vue": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.0.11.tgz",

package.json

@@ -54,6 +54,7 @@
     "sass-loader": "^11.0.1",
     "typescript": "^4.2.4",
     "vite": "^2.2.1",
-    "vite-plugin-mock": "^2.5.0"
+    "vite-plugin-mock": "^2.5.0",
+    "vite-plugin-style-import": "^0.9.2"
   }
 }

src/components/BreadCrumb/src/BreadCrumb.vue

@@ -5,11 +5,12 @@
         <span
           v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
           class="no-redirect"
-          >{{ $t(item.meta.title) }}</span
-        >
-        <a v-else @click.prevent="handleLink(item)">{{
+        >{{ $t(item.meta.title) }}</span>
+        <a v-else @click.prevent="handleLink(item)">
+          {{
           $t(item.meta.title)
-        }}</a>
+          }}
+        </a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -36,20 +37,18 @@ export default defineComponent({
     };
 
     const getBreadcrumb = (): void => {
-      let matched = route.matched.filter(
-        (item) => item.meta && item.meta.title
-      );
+      let matched = route.matched.filter(item => item.meta && item.meta.title);
       const first = matched[0];
       if (!isDashboard(first)) {
         matched = [
           ({
             path: "/welcome",
-            meta: { title: "home" },
-          } as unknown) as RouteLocationMatched,
+            meta: { title: "message.hshome" }
+          } as unknown) as RouteLocationMatched
         ].concat(matched);
       }
       levelList.value = matched.filter(
-        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
+        item => item.meta && item.meta.title && item.meta.breadcrumb !== false
       );
     };
 
@@ -61,9 +60,9 @@ export default defineComponent({
     );
 
     // const pathCompile = (path: string): string | Object => {
-      // const { params } = route;
-      // var toPath = pathToRegexp.compile(path);
-      // return toPath(params);
+    // const { params } = route;
+    // var toPath = pathToRegexp.compile(path);
+    // return toPath(params);
     // };
 
     const handleLink = (item: RouteLocationMatched): any => {
@@ -76,7 +75,7 @@ export default defineComponent({
     };
 
     return { levelList, handleLink };
-  },
+  }
 });
 </script>
 

src/layout/components/Navbar.vue

@@ -23,7 +23,10 @@
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item icon="el-icon-switch-button" @click="logout">{{ $t("LoginOut") }}</el-dropdown-item>
+            <el-dropdown-item
+              icon="el-icon-switch-button"
+              @click="logout"
+            >{{ $t("message.hsLoginOut") }}</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>

src/layout/components/screenfull/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="screen-full" @click="toggle">
     <i
-      :title="isFullscreen ? $t('exitfullscreen') : $t('fullscreen')"
+      :title="isFullscreen ? $t('message.hsexitfullscreen') : $t('message.hsfullscreen')"
       :class="
         isFullscreen
           ? 'iconfont team-iconexit-fullscreen'

src/layout/components/tag/index.vue

@@ -13,7 +13,11 @@
     <!-- 右侧功能按钮 -->
     <ul class="right-func">
       <li>
-        <i :title="$t('refreshRoute')" class="el-icon-refresh-right rotate" @click="onFresh"></i>
+        <i
+          :title="$t('message.hsrefreshRoute')"
+          class="el-icon-refresh-right rotate"
+          @click="onFresh"
+        ></i>
       </li>
       <li>
         <el-dropdown trigger="click" placement="bottom-end">

src/layout/components/tag/tagsHook.ts

@@ -14,7 +14,7 @@ let dynamic: InterDynamic = reactive({
     {
       path: "/welcome",
       meta: {
-        title: "home",
+        title: "message.hshome",
         icon: "el-icon-s-home",
         showLink: true,
         savedPosition: false,

src/layout/components/tag/type.ts

@@ -7,7 +7,7 @@ interface RouteModel {
 export const homeRoute: RouteModel = {
   path: "/welcome",
   meta: {
-    title: "home",
+    title: "message.hshome",
     icon: "el-icon-s-home",
     showLink: true,
     savedPosition: false,

src/locales/ch.json

@@ -1,24 +0,0 @@
-{
-  "home": "首页",
-  "LoginOut": "退出系统",
-  "fullscreen": "全屏",
-  "exitfullscreen": "退出全屏",
-  "usermanagement": "用户管理",
-  "baseinfo": "基础信息",
-  "editor": "编辑器",
-  "error": "错误页面",
-  "404": "404",
-  "401": "401",
-  "components": "组件",
-  "video": "视频组件",
-  "map": "地图组件",
-  "draggable": "拖拽组件",
-  "split-pane": "切割面板",
-  "button": "按钮组件",
-  "cropping": "图片裁剪",
-  "countTo": "数字动画",
-  "selector": "选择器组件",
-  "flowChart": "流程图",
-  "seamless": "无缝滚动",
-  "refreshRoute": "刷新路由"
-}

src/locales/en.json

@@ -1,24 +0,0 @@
-{
-  "home": "Home",
-  "LoginOut": "Login Out",
-  "fullscreen": "Fullscreen",
-  "exitfullscreen": "Exit Fullscreen",
-  "usermanagement": "User Manage",
-  "baseinfo": "Base Info",
-  "editor": "Editor",
-  "error": "Error Page",
-  "404": "404",
-  "401": "401",
-  "components": "Components",
-  "video": "Video Components",
-  "map": "Map Components",
-  "draggable": "Draggable Components",
-  "split-pane": "Split Pane",
-  "button": "Button Components",
-  "cropping": "Picture Cropping",
-  "countTo": "Digital Animation",
-  "selector": "Selector Components",
-  "flowChart": "flow Chart",
-  "seamless": "Seamless Scroll",
-  "refreshRoute": "refreshRoute"
-}

src/main.ts

@@ -1,70 +1,58 @@
-import { createApp } from "vue"
-import App from "./App.vue"
-import router from "./router"
-import store from "./store"
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
 
-// 内置ElementPlus
-import ElementPlus from "element-plus"
-import "element-plus/lib/theme-chalk/index.css"
-
-// 内置vxe-table
-import "font-awesome/css/font-awesome.css"
-import VXETable from "vxe-table"
-import "vxe-table/lib/style.css"
-
-// 内置国际化语言包
-import { createI18n } from "vue-i18n"
-import ch from "./locales/ch.json"
-import en from "./locales/en.json"
-const i18n = createI18n({
-  locale: 'ch', //默认使用中文
-  messages: {
-    ch,
-    en
-  }
-})
+import { useElementPlus } from "../src/plugins/element-plus";
+import { useTable } from "../src/plugins/vxe-table";
+import { usI18n } from "../src/plugins/i18n";
 
 // 导入公共样式
-import "./style/index.scss"
+import "./style/index.scss";
 // 导入字体图标
-import "./assets/iconfont/iconfont.js"
-import "./assets/iconfont/iconfont.css"
+import "./assets/iconfont/iconfont.js";
+import "./assets/iconfont/iconfont.css";
 
-import { setConfig, getConfig } from "./config"
-import axios from "axios"
+import { setConfig, getConfig } from "./config";
+import axios from "axios";
 
-const app = createApp(App)
-app.config.globalProperties.$config = getConfig()
+const app = createApp(App);
+app.config.globalProperties.$config = getConfig();
 
 // 获取项目动态全局配置
 export const getServerConfig = async (): Promise<any> => {
   return axios({
     baseURL: "",
     method: "get",
-    url: process.env.NODE_ENV === 'production' ? "/manages/serverConfig.json" : "/serverConfig.json"
-  }).then(({ data: config }) => {
-    let $config = app.config.globalProperties.$config
-    // 自动注入项目配置
-    if (app && $config && typeof config === "object") {
-      $config = Object.assign($config, config)
-      app.config.globalProperties.$config = $config
-      // 设置全局配置
-      setConfig($config)
-    }
-    // 设置全局baseURL
-    app.config.globalProperties.$baseUrl = $config.baseURL
-    return $config
-  }).catch(() => { throw "请在public文件夹下添加serverConfig.json配置文件" })
-}
+    url:
+      process.env.NODE_ENV === "production"
+        ? "/manages/serverConfig.json"
+        : "/serverConfig.json",
+  })
+    .then(({ data: config }) => {
+      let $config = app.config.globalProperties.$config;
+      // 自动注入项目配置
+      if (app && $config && typeof config === "object") {
+        $config = Object.assign($config, config);
+        app.config.globalProperties.$config = $config;
+        // 设置全局配置
+        setConfig($config);
+      }
+      // 设置全局baseURL
+      app.config.globalProperties.$baseUrl = $config.baseURL;
+      return $config;
+    })
+    .catch(() => {
+      throw "请在public文件夹下添加serverConfig.json配置文件";
+    });
+};
 
 getServerConfig().then(() => {
   app
-    .use(store)
     .use(router)
-    .use(i18n)
-    .use(ElementPlus)
-    .use(VXETable)
-    .mount('#app')
-})
-
-
+    .use(store)
+    .use(useElementPlus)
+    .use(useTable)
+    .use(usI18n)
+    .mount("#app");
+});

src/plugins/element-plus/index.ts

@@ -0,0 +1,62 @@
+import { App } from "vue";
+import {
+  ElAffix,
+  ElSkeleton,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElScrollbar,
+  ElSubmenu,
+  ElButton,
+  ElCol,
+  ElRow,
+  ElSpace,
+  ElDivider,
+  ElCard,
+  ElDropdown,
+  ElDialog,
+  ElMenu,
+  ElMenuItem,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElIcon,
+  ElInput,
+  ElForm,
+  ElFormItem,
+  ElLoading,
+} from "element-plus";
+
+const components = [
+  ElAffix,
+  ElSkeleton,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElScrollbar,
+  ElSubmenu,
+  ElButton,
+  ElCol,
+  ElRow,
+  ElSpace,
+  ElDivider,
+  ElCard,
+  ElDropdown,
+  ElDialog,
+  ElMenu,
+  ElMenuItem,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElIcon,
+  ElInput,
+  ElForm,
+  ElFormItem,
+];
+
+const plugins = [ElLoading];
+
+export function useElementPlus(app: App) {
+  components.forEach((component) => {
+    app.component(component.name, component);
+  });
+  plugins.forEach((plugin) => {
+    app.use(plugin);
+  });
+}

src/plugins/i18n/config.ts

@@ -0,0 +1,94 @@
+// 菜单国际化配置
+// vxe-table组件国际化
+import zhVxeTable from "vxe-table/lib/locale/lang/zh-CN";
+import enVxeTable from "vxe-table/lib/locale/lang/en-US";
+
+export const menusConfig = {
+  zh: {
+    message: {
+      hshome: "首页",
+      hsuserManagement: "用户管理",
+      hsBaseinfo: "基础信息",
+      hseditor: "编辑器",
+      hserror: "错误页面",
+      hsfourZeroFour: "404",
+      hsfourZeroOne: "401",
+      hscomponents: "组件",
+      hsvideo: "视频组件",
+      hsmap: "地图组件",
+      hsdraggable: "拖拽组件",
+      hssplitPane: "切割面板",
+      hsbutton: "按钮组件",
+      hscropping: "图片裁剪",
+      hscountTo: "数字动画",
+      hsselector: "选择器组件",
+      hsflowChart: "流程图",
+      hsseamless: "无缝滚动",
+    },
+  },
+  en: {
+    message: {
+      hshome: "Home",
+      hsuserManagement: "User Manage",
+      hsBaseinfo: "Base Info",
+      hseditor: "Editor",
+      hserror: "Error Page",
+      hsfourZeroFour: "404",
+      hsfourZeroOne: "401",
+      hscomponents: "Components",
+      hsvideo: "Video Components",
+      hsmap: "Map Components",
+      hsdraggable: "Draggable Components",
+      hssplitPane: "Split Pane",
+      hsbutton: "Button Components",
+      hscropping: "Picture Cropping",
+      hscountTo: "Digital Animation",
+      hsselector: "Selector Components",
+      hsflowChart: "Flow Chart",
+      hsseamless: "Seamless Scroll",
+    },
+  },
+};
+
+// 按钮配置
+export const buttonConfig = {
+  zh: {
+    message: {
+      hsLoginOut: "退出系统",
+      hsfullscreen: "全屏",
+      hsexitfullscreen: "退出全屏",
+      hsrefreshRoute: "刷新路由",
+      hslogin: "登陆",
+      hsregister: "注册",
+      hsadd: "新增",
+      hsmark: "标记/取消",
+      hssave: "保存",
+    },
+  },
+  en: {
+    message: {
+      hsLoginOut: "loginOut",
+      hsfullscreen: "fullScreen",
+      hsexitfullscreen: "exitFullscreen",
+      hsrefreshRoute: "refreshRoute",
+      hslogin: "login",
+      hsregister: "register",
+      hsadd: "Add",
+      hsmark: "Mark/Cancel",
+      hssave: "Save",
+    },
+  },
+};
+
+const localesList = [menusConfig, buttonConfig];
+
+export const localesConfigs = {
+  zh: {
+    message: Object.assign({}, ...localesList.map((v) => v.zh.message)),
+    ...zhVxeTable,
+  },
+  en: {
+    message: Object.assign({}, ...localesList.map((v) => v.en.message)),
+    ...enVxeTable,
+  },
+};

src/plugins/i18n/index.ts

@@ -0,0 +1,14 @@
+// 多组件库的国际化和本地项目国际化兼容
+import { App } from "vue";
+import { createI18n } from "vue-i18n";
+import { localesConfigs } from "./config";
+
+export const i18n = createI18n({
+  locale: "zh", // set locale
+  fallbackLocale: "zh", // set fallback locale
+  messages: localesConfigs,
+});
+
+export function usI18n(app: App) {
+  app.use(i18n);
+}

src/plugins/vxe-table/index.ts

@@ -0,0 +1,108 @@
+import { App } from "vue";
+import { i18n } from "../i18n/index";
+import "font-awesome/css/font-awesome.css";
+import "xe-utils";
+import {
+  // 核心
+  VXETable,
+
+  // 表格功能
+  Header,
+  Footer,
+  Icon,
+  Filter,
+  Edit,
+  Menu,
+  Export,
+  Keyboard,
+  Validator,
+
+  // 可选组件
+  Column,
+  Colgroup,
+  Grid,
+  Tooltip,
+  Toolbar,
+  Pager,
+  Form,
+  FormItem,
+  FormGather,
+  Checkbox,
+  CheckboxGroup,
+  Radio,
+  RadioGroup,
+  RadioButton,
+  Switch,
+  Input,
+  Select,
+  Optgroup,
+  Option,
+  Textarea,
+  Button,
+  Modal,
+  List,
+  Pulldown,
+
+  // 表格
+  Table,
+} from "vxe-table";
+
+// 全局默认参数
+VXETable.setup({
+  version: 0,
+  zIndex: 100,
+  table: {
+    autoResize: true,
+  },
+  // 对组件内置的提示语进行国际化翻译
+  i18n: (key, args) => i18n.global.t(key, args),
+  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
+  translate(key, args) {
+    // 例如，只翻译 "app." 开头的键值
+    if (key && key.indexOf("message.") > -1) {
+      return i18n.global.t(key, args);
+    }
+    return key;
+  },
+});
+
+export function useTable(app: App) {
+  app
+    .use(Header)
+    .use(Footer)
+    .use(Icon)
+    .use(Filter)
+    .use(Edit)
+    .use(Menu)
+    .use(Export)
+    .use(Keyboard)
+    .use(Validator)
+
+    // 可选组件
+    .use(Column)
+    .use(Colgroup)
+    .use(Grid)
+    .use(Tooltip)
+    .use(Toolbar)
+    .use(Pager)
+    .use(Form)
+    .use(FormItem)
+    .use(FormGather)
+    .use(Checkbox)
+    .use(CheckboxGroup)
+    .use(Radio)
+    .use(RadioGroup)
+    .use(RadioButton)
+    .use(Switch)
+    .use(Input)
+    .use(Select)
+    .use(Optgroup)
+    .use(Option)
+    .use(Textarea)
+    .use(Button)
+    .use(Modal)
+    .use(List)
+    .use(Pulldown)
+    // 安装表格
+    .use(Table);
+}

src/router/index.ts

@@ -1,9 +1,4 @@
-import {
-  createRouter,
-  createWebHistory,
-  createWebHashHistory,
-  RouteRecordRaw,
-} from "vue-router";
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 
 import Layout from "../layout/index.vue";
 
@@ -22,7 +17,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () =>
           import(/* webpackChunkName: "home" */ "../views/welcome.vue"),
         meta: {
-          title: "home",
+          title: "message.hshome",
           showLink: true,
           savedPosition: false,
         },
@@ -47,7 +42,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "components" */ "../views/components/video/index.vue"
           ),
         meta: {
-          title: "video",
+          title: "message.hsvideo",
           showLink: false,
           savedPosition: true,
         },
@@ -59,7 +54,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "components" */ "../views/components/map/index.vue"
           ),
         meta: {
-          title: "map",
+          title: "message.hsmap",
           showLink: false,
           savedPosition: true,
         },
@@ -71,7 +66,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "components" */ "../views/components/draggable/index.vue"
           ),
         meta: {
-          title: "draggable",
+          title: "message.hsdraggable",
           showLink: false,
           savedPosition: true,
         },
@@ -83,7 +78,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "components" */ "../views/components/split-pane/index.vue"
           ),
         meta: {
-          title: "split-pane",
+          title: "message.hssplitPane",
           showLink: false,
           savedPosition: true,
         },
@@ -95,7 +90,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "components" */ "../views/components/button/index.vue"
           ),
         meta: {
-          title: "button",
+          title: "message.hsbutton",
           showLink: false,
           savedPosition: true,
         },
@@ -107,7 +102,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "components" */ "../views/components/cropping/index.vue"
           ),
         meta: {
-          title: "cropping",
+          title: "message.hscropping",
           showLink: false,
           savedPosition: true,
         },
@@ -119,7 +114,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "components" */ "../views/components/count-to/index.vue"
           ),
         meta: {
-          title: "countTo",
+          title: "message.hscountTo",
           showLink: false,
           savedPosition: true,
         },
@@ -131,7 +126,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "components" */ "../views/components/selector/index.vue"
           ),
         meta: {
-          title: "selector",
+          title: "message.hsselector",
           showLink: false,
           savedPosition: true,
         },
@@ -143,7 +138,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "components" */ "../views/components/seamless-scroll/index.vue"
           ),
         meta: {
-          title: "seamless",
+          title: "message.hsseamless",
           showLink: false,
           savedPosition: true,
         },
@@ -152,7 +147,7 @@ const routes: Array<RouteRecordRaw> = [
       //   path: '/components/flowChart',
       //   component: () => import(/* webpackChunkName: "components" */ '../views/components/flow-chart/index.vue'),
       //   meta: {
-      //     title: 'flowChart',
+      //     title: 'message.hsflowChart',
       //     showLink: false,
       //     savedPosition: true
       //   }
@@ -160,7 +155,7 @@ const routes: Array<RouteRecordRaw> = [
     ],
     meta: {
       icon: "el-icon-menu",
-      title: "components",
+      title: "message.hscomponents",
       showLink: true,
       savedPosition: true,
     },
@@ -178,7 +173,7 @@ const routes: Array<RouteRecordRaw> = [
             /* webpackChunkName: "user" */ "../views/flow-chart/index.vue"
           ),
         meta: {
-          title: "flowChart",
+          title: "message.hsflowChart",
           showLink: false,
           savedPosition: true,
         },
@@ -186,7 +181,7 @@ const routes: Array<RouteRecordRaw> = [
     ],
     meta: {
       icon: "el-icon-set-up",
-      title: "flowChart",
+      title: "message.hsflowChart",
       showLink: true,
       savedPosition: true,
     },
@@ -203,7 +198,7 @@ const routes: Array<RouteRecordRaw> = [
           import(/* webpackChunkName: "user" */ "../views/editor/index.vue"),
         meta: {
           // icon: 'el-icon-edit-outline',
-          title: "editor",
+          title: "message.hseditor",
           showLink: false,
           savedPosition: true,
         },
@@ -211,7 +206,7 @@ const routes: Array<RouteRecordRaw> = [
     ],
     meta: {
       icon: "el-icon-edit-outline",
-      title: "editor",
+      title: "message.hseditor",
       showLink: true,
       savedPosition: true,
     },
@@ -228,7 +223,7 @@ const routes: Array<RouteRecordRaw> = [
           import(/* webpackChunkName: "user" */ "../views/user.vue"),
         meta: {
           // icon: 'el-icon-user',
-          title: "baseinfo",
+          title: "message.hsBaseinfo",
           showLink: false,
           savedPosition: true,
         },
@@ -236,7 +231,7 @@ const routes: Array<RouteRecordRaw> = [
     ],
     meta: {
       icon: "el-icon-user",
-      title: "usermanagement",
+      title: "message.hsuserManagement",
       showLink: true,
       savedPosition: true,
     },
@@ -252,7 +247,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () =>
           import(/* webpackChunkName: "error" */ "../views/error/401.vue"),
         meta: {
-          title: "401",
+          title: "message.hsfourZeroOne",
           showLink: false,
           savedPosition: true,
         },
@@ -262,7 +257,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () =>
           import(/* webpackChunkName: "error" */ "../views/error/404.vue"),
         meta: {
-          title: "404",
+          title: "message.hsfourZeroFour",
           showLink: false,
           savedPosition: true,
         },
@@ -270,7 +265,7 @@ const routes: Array<RouteRecordRaw> = [
     ],
     meta: {
       icon: "el-icon-position",
-      title: "error",
+      title: "message.hserror",
       showLink: true,
       savedPosition: true,
     },
@@ -281,7 +276,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "login" */ "../views/login.vue"),
     meta: {
-      title: "登陆",
+      title: "message.hslogin",
       showLink: false,
     },
   },
@@ -291,7 +286,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "register" */ "../views/register.vue"),
     meta: {
-      title: "注册",
+      title: "message.hsregister",
       showLink: false,
     },
   },
@@ -302,7 +297,7 @@ const routes: Array<RouteRecordRaw> = [
     redirect: "/error/404",
     meta: {
       icon: "el-icon-s-home",
-      title: "首页",
+      title: "message.hshome",
       showLink: false,
       savedPosition: false,
     },
@@ -344,7 +339,7 @@ const whiteList = ["/login", "/register"];
 router.beforeEach((to, _from, next) => {
   NProgress.start();
   // @ts-ignore
-  document.title = to.meta.title; // 动态title
+  // document.title = $t(to.meta.title); // 动态title
   whiteList.indexOf(to.path) !== -1 || storageSession.getItem("info")
     ? next()
     : next("/login"); // 全部重定向到登录页

src/views/user.vue

@@ -18,65 +18,65 @@ export default {
       exportConfig: {},
       pagerConfig: {
         perfect: true,
-        pageSize: 15,
+        pageSize: 15
       },
       editConfig: {
         trigger: "click",
         mode: "row",
-        showStatus: true,
+        showStatus: true
       },
       toolbarConfig: {
         buttons: [
           {
             code: "insert_actived",
-            name: "新增",
+            name: "message.hsadd",
             status: "perfect",
-            icon: "fa fa-plus",
+            icon: "fa fa-plus"
           },
           {
             code: "mark_cancel",
-            name: "标记/取消",
+            name: "message.hsmark",
             status: "perfect",
-            icon: "fa fa-trash-o",
+            icon: "fa fa-trash-o"
           },
           {
             code: "save",
-            name: "保存",
+            name: "message.hssave",
             status: "perfect",
-            icon: "fa fa-save",
-          },
+            icon: "fa fa-save"
+          }
         ],
         perfect: true,
         refresh: {
           icon: "fa fa-refresh",
-          iconLoading: "fa fa-spinner fa-spin",
+          iconLoading: "fa fa-spinner fa-spin"
         },
         import: {
-          icon: "fa fa-upload",
+          icon: "fa fa-upload"
         },
         export: {
-          icon: "fa fa-download",
+          icon: "fa fa-download"
         },
         print: {
-          icon: "fa fa-print",
+          icon: "fa fa-print"
         },
-        // zoom: {
-        //   iconIn: "fa fa-arrows-alt",
-        //   iconOut: "fa fa-expand",
-        // },
-        custom: {
-          icon: "fa fa-cog",
+        zoom: {
+          iconIn: "fa fa-arrows-alt",
+          iconOut: "fa fa-expand"
         },
+        custom: {
+          icon: "fa fa-cog"
+        }
       },
       proxyConfig: {
         props: {
           result: "result",
-          total: "page.total",
+          total: "page.total"
         },
         ajax: {
           // 接收 Promise
           query: ({ page }) => {
-            return new Promise((resolve) => {
+            return new Promise(resolve => {
               setTimeout(() => {
                 const list = [
                   {
@@ -86,7 +86,7 @@ export default {
                     role: "Develop",
                     sex: "Man",
                     age: 28,
-                    address: "Shenzhen",
+                    address: "Shenzhen"
                   },
                   {
                     id: 10002,
@@ -95,7 +95,7 @@ export default {
                     role: "Test",
                     sex: "Women",
                     age: 22,
-                    address: "Guangzhou",
+                    address: "Guangzhou"
                   },
                   {
                     id: 10003,
@@ -104,7 +104,7 @@ export default {
                     role: "PM",
                     sex: "Man",
                     age: 32,
-                    address: "Shanghai",
+                    address: "Shanghai"
                   },
                   {
                     id: 10004,
@@ -113,7 +113,7 @@ export default {
                     role: "Designer",
                     sex: "Women ",
                     age: 23,
-                    address: "Shenzhen",
+                    address: "Shenzhen"
                   },
                   {
                     id: 10005,
@@ -122,7 +122,7 @@ export default {
                     role: "Develop",
                     sex: "Women ",
                     age: 30,
-                    address: "Shanghai",
+                    address: "Shanghai"
                   },
                   {
                     id: 10006,
@@ -131,7 +131,7 @@ export default {
                     role: "Designer",
                     sex: "Women ",
                     age: 21,
-                    address: "Shenzhen",
+                    address: "Shenzhen"
                   },
                   {
                     id: 10007,
@@ -140,7 +140,7 @@ export default {
                     role: "Test",
                     sex: "Man ",
                     age: 29,
-                    address: "vxe-table 从入门到放弃",
+                    address: "vxe-table 从入门到放弃"
                   },
                   {
                     id: 10008,
@@ -149,7 +149,7 @@ export default {
                     role: "Develop",
                     sex: "Man ",
                     age: 35,
-                    address: "Shenzhen",
+                    address: "Shenzhen"
                   },
                   {
                     id: 10009,
@@ -158,7 +158,7 @@ export default {
                     role: "Develop",
                     sex: "Man ",
                     age: 35,
-                    address: "Shenzhen",
+                    address: "Shenzhen"
                   },
                   {
                     id: 100010,
@@ -167,7 +167,7 @@ export default {
                     role: "Develop",
                     sex: "Man ",
                     age: 35,
-                    address: "Guangzhou",
+                    address: "Guangzhou"
                   },
                   {
                     id: 100011,
@@ -176,7 +176,7 @@ export default {
                     role: "Test",
                     sex: "Women ",
                     age: 26,
-                    address: "vxe-table 从入门到放弃",
+                    address: "vxe-table 从入门到放弃"
                   },
                   {
                     id: 100012,
@@ -185,7 +185,7 @@ export default {
                     role: "Develop",
                     sex: "Man ",
                     age: 34,
-                    address: "Guangzhou",
+                    address: "Guangzhou"
                   },
                   {
                     id: 100013,
@@ -194,24 +194,24 @@ export default {
                     role: "Test",
                     sex: "Women ",
                     age: 22,
-                    address: "Shenzhen",
-                  },
+                    address: "Shenzhen"
+                  }
                 ];
                 resolve({
                   page: {
-                    total: list.length,
+                    total: list.length
                   },
                   result: list.slice(
                     (page.currentPage - 1) * page.pageSize,
                     page.currentPage * page.pageSize
-                  ),
+                  )
                 });
               }, 100);
             });
           },
           // body 对象： { removeRecords }
           delete: () => {
-            return new Promise((resolve) => {
+            return new Promise(resolve => {
               setTimeout(() => {
                 resolve({});
               }, 100);
@@ -219,13 +219,13 @@ export default {
           },
           // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
           save: () => {
-            return new Promise((resolve) => {
+            return new Promise(resolve => {
               setTimeout(() => {
                 resolve({});
               }, 100);
             });
-          },
-        },
+          }
+        }
       },
       columns: [
         { type: "checkbox", width: 50 },
@@ -237,15 +237,15 @@ export default {
           field: "address",
           title: "Address",
           showOverflow: true,
-          editRender: { name: "input" },
-        },
-      ],
+          editRender: { name: "input" }
+        }
+      ]
     } as VxeGridProps);
 
     return {
-      gridOptions,
+      gridOptions
     };
-  },
+  }
 };
 </script>
 

vite.config.ts

@@ -1,36 +1,38 @@
-
-import { resolve } from 'path'
-import { UserConfigExport, ConfigEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
-import { loadEnv } from './build/utils'
-import { createProxy } from './build/proxy'
-import { viteMockServe } from 'vite-plugin-mock'
+import { resolve } from "path";
+import { UserConfigExport, ConfigEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { loadEnv } from "./build/utils";
+import { createProxy } from "./build/proxy";
+import { viteMockServe } from "vite-plugin-mock";
+import styleImport from "vite-plugin-style-import";
 
 const pathResolve = (dir: string): any => {
-  return resolve(__dirname, '.', dir)
-}
+  return resolve(__dirname, ".", dir);
+};
 
-const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_OPEN } = loadEnv()
+const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_OPEN } = loadEnv();
 
 const alias: Record<string, string> = {
-  '/@': pathResolve('src'),
-  'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' //解决警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
-}
+  "/@": pathResolve("src"),
+  "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js", //解决警告You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
+};
 
-const root: string = process.cwd()
+const root: string = process.cwd();
 
 export default ({ command }: ConfigEnv): UserConfigExport => {
-  let prodMock = true
+  let prodMock = true;
   return {
     /**
      * 基本公共路径
+     * /manages/ 可根据项目部署域名的后缀自行填写（全局搜/manages/替换）
      * @default '/'
      */
-    base: process.env.NODE_ENV === "production" ? "/manages/" : VITE_PUBLIC_PATH,
+    base:
+      process.env.NODE_ENV === "production" ? "/manages/" : VITE_PUBLIC_PATH,
     root,
     resolve: {
-      alias
+      alias,
     },
     // 服务端渲染
     server: {
@@ -42,15 +44,38 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
        */
       port: VITE_PORT,
       // 本地跨域代理
-      proxy: createProxy(VITE_PROXY)
+      proxy: createProxy(VITE_PROXY),
     },
     plugins: [
       vue(),
       vueJsx(),
+      styleImport({
+        libs: [
+          // 按需加载element-plus
+          {
+            libraryName: "element-plus",
+            esModule: true,
+            ensureStyleFile: true,
+            resolveStyle: (name) => {
+              return `element-plus/lib/theme-chalk/${name}.css`;
+            },
+            resolveComponent: (name) => {
+              return `element-plus/lib/${name}`;
+            },
+          },
+          // 按需加载vxe-table
+          {
+            libraryName: "vxe-table",
+            esModule: true,
+            resolveComponent: (name) => `vxe-table/es/${name}`,
+            resolveStyle: (name) => `vxe-table/es/${name}/style.css`,
+          },
+        ],
+      }),
       viteMockServe({
-        mockPath: 'mock',
-        localEnabled: command === 'serve',
-        prodEnabled: command !== 'serve' && prodMock,
+        mockPath: "mock",
+        localEnabled: command === "serve",
+        prodEnabled: command !== "serve" && prodMock,
         injectCode: `
           import { setupProdMockServer } from './mockProdServer';
           setupProdMockServer();
@@ -58,13 +83,19 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
         logger: true,
       }),
     ],
+    optimizeDeps: {
+      include: [
+        "element-plus/lib/locale/lang/zh-cn",
+        "element-plus/lib/locale/lang/en",
+      ],
+    },
     build: {
       brotliSize: false,
       // 消除打包大小超过500kb警告
-      chunkSizeWarningLimit: 2000
+      chunkSizeWarningLimit: 2000,
     },
     define: {
-      __INTLIFY_PROD_DEVTOOLS__: false
-    }
-  }
-}
+      __INTLIFY_PROD_DEVTOOLS__: false,
+    },
+  };
+};