fix: ensure that the correct components are dynamically imported

Vben
1 parent 3b8ca420
Showing 6 changed files with 32 additions and 5 deletions
.env
build/utils.ts
src/router/helper/routeHelper.ts
src/settings/projectSetting.ts
types/window.d.ts
vite.config.ts
@@ -6,3 +6,6 @@ VITE_GLOB_APP_TITLE = Vben Admin
 # spa shortname
 VITE_GLOB_APP_SHORT_NAME = vue_vben_admin
+
+
+VITE_DYNAMIC_IMPORT = false
@@ -30,6 +30,7 @@ export interface ViteEnv {
   VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
   VITE_LEGACY: boolean;
   VITE_USE_IMAGEMIN: boolean;
+  VITE_DYNAMIC_IMPORT: boolean;
 }
 // Read all environment variable configuration files to process.env
@@ -9,10 +9,22 @@ export type LayoutMapKey = &#39;LAYOUT&#39;;
 const LayoutMap = new Map<LayoutMapKey, () => Promise<typeof import('*.vue')>>();
-const dynamicViewsModules = import.meta.glob('../../views/**/*.{vue,tsx}');
+let dynamicViewsModules: Record<
+  string,
+  () => Promise<{
+    [key: string]: any;
+  }>
+>;
 // 动态引入
 function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
+  // TODO It may be a bug in Vite. When the conditions are not established, the dynamically imported files will still be packaged in.
+  if (!__DYNAMIC_IMPORT__) {
+    dynamicViewsModules = {};
+  } else {
+    dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
+  }
+
   if (!routes) return;
   routes.forEach((item) => {
     const { component, name } = item;
@@ -37,8 +49,10 @@ function dynamicImport(
 ) {
   const keys = Object.keys(dynamicViewsModules);
   const matchKeys = keys.filter((key) => {
-    const k = key.replace('../../views', '');
-    return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
+    let k = key.replace('../../views', '');
+    const lastIndex = k.lastIndexOf('.');
+    k = k.substring(0, lastIndex);
+    return k === component;
   });
   if (matchKeys?.length === 1) {
     const matchKey = matchKeys[0];
@@ -19,7 +19,7 @@ const setting: ProjectConfig = {
   settingButtonPosition: SettingButtonPositionEnum.AUTO,
   // Permission mode
-  permissionMode: PermissionModeEnum.ROLE,
+  permissionMode: PermissionModeEnum.BACK,
   // Permission-related cache is stored in sessionStorage or localStorage
   permissionCacheType: CacheTypeEnum.SESSION,
 import type { App } from 'vue';
 declare global {
+  declare const __DYNAMIC_IMPORT__: boolean;
   declare interface Window {
     // Global vue app instance
     __APP__: App<Element>;
@@ -21,7 +21,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
   // The boolean type read by loadEnv is a string. This function can be converted to boolean type
   const viteEnv = wrapperEnv(env);
-  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_LEGACY } = viteEnv;
+  const {
+    VITE_PORT,
+    VITE_PUBLIC_PATH,
+    VITE_PROXY,
+    VITE_DROP_CONSOLE,
+    VITE_LEGACY,
+    VITE_DYNAMIC_IMPORT,
+  } = viteEnv;
   const isBuild = command === 'build';
@@ -68,6 +75,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
     define: {
       // setting vue-i18-next
       // Suppress warning
+      __DYNAMIC_IMPORT__: VITE_DYNAMIC_IMPORT,
       __VUE_I18N_LEGACY_API__: false,
       __VUE_I18N_FULL_INSTALL__: false,
       __INTLIFY_PROD_DEVTOOLS__: false,