fix: ensure that the correct components are dynamically imported

.env

@@ -6,3 +6,6 @@ VITE_GLOB_APP_TITLE = Vben Admin
 
 # spa shortname
 VITE_GLOB_APP_SHORT_NAME = vue_vben_admin
+
+
+VITE_DYNAMIC_IMPORT = false

build/utils.ts

@@ -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

src/router/helper/routeHelper.ts

@@ -9,10 +9,22 @@ export type LayoutMapKey = 'LAYOUT';
 
 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', '');
+    let k = key.replace('../../views', '');
-    return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
+    const lastIndex = k.lastIndexOf('.');
+    k = k.substring(0, lastIndex);
+    return k === component;
   });
   if (matchKeys?.length === 1) {
     const matchKey = matchKeys[0];

src/settings/projectSetting.ts

@@ -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,

types/window.d.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue';
 
 declare global {
+  declare const __DYNAMIC_IMPORT__: boolean;
   declare interface Window {
     // Global vue app instance
     __APP__: App<Element>;

vite.config.ts

@@ -21,7 +21,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
   // 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 => {
     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,