Commit b476e1c84c52dab7030fd19b34ecd33e65fadcb2

Authored by Vben
1 parent 3b8ca420

fix: ensure that the correct components are dynamically imported

... ... @@ -6,3 +6,6 @@ VITE_GLOB_APP_TITLE = Vben Admin
6 6  
7 7 # spa shortname
8 8 VITE_GLOB_APP_SHORT_NAME = vue_vben_admin
  9 +
  10 +
  11 +VITE_DYNAMIC_IMPORT = false
... ...
build/utils.ts
... ... @@ -30,6 +30,7 @@ export interface ViteEnv {
30 30 VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
31 31 VITE_LEGACY: boolean;
32 32 VITE_USE_IMAGEMIN: boolean;
  33 + VITE_DYNAMIC_IMPORT: boolean;
33 34 }
34 35  
35 36 // Read all environment variable configuration files to process.env
... ...
src/router/helper/routeHelper.ts
... ... @@ -9,10 +9,22 @@ export type LayoutMapKey = 'LAYOUT';
9 9  
10 10 const LayoutMap = new Map<LayoutMapKey, () => Promise<typeof import('*.vue')>>();
11 11  
12   -const dynamicViewsModules = import.meta.glob('../../views/**/*.{vue,tsx}');
  12 +let dynamicViewsModules: Record<
  13 + string,
  14 + () => Promise<{
  15 + [key: string]: any;
  16 + }>
  17 +>;
13 18  
14 19 // 动态引入
15 20 function asyncImportRoute(routes: AppRouteRecordRaw[] | undefined) {
  21 + // TODO It may be a bug in Vite. When the conditions are not established, the dynamically imported files will still be packaged in.
  22 + if (!__DYNAMIC_IMPORT__) {
  23 + dynamicViewsModules = {};
  24 + } else {
  25 + dynamicViewsModules = dynamicViewsModules || import.meta.glob('../../views/**/*.{vue,tsx}');
  26 + }
  27 +
16 28 if (!routes) return;
17 29 routes.forEach((item) => {
18 30 const { component, name } = item;
... ... @@ -37,8 +49,10 @@ function dynamicImport(
37 49 ) {
38 50 const keys = Object.keys(dynamicViewsModules);
39 51 const matchKeys = keys.filter((key) => {
40   - const k = key.replace('../../views', '');
41   - return k.startsWith(`${component}`) || k.startsWith(`/${component}`);
  52 + let k = key.replace('../../views', '');
  53 + const lastIndex = k.lastIndexOf('.');
  54 + k = k.substring(0, lastIndex);
  55 + return k === component;
42 56 });
43 57 if (matchKeys?.length === 1) {
44 58 const matchKey = matchKeys[0];
... ...
src/settings/projectSetting.ts
... ... @@ -19,7 +19,7 @@ const setting: ProjectConfig = {
19 19 settingButtonPosition: SettingButtonPositionEnum.AUTO,
20 20  
21 21 // Permission mode
22   - permissionMode: PermissionModeEnum.ROLE,
  22 + permissionMode: PermissionModeEnum.BACK,
23 23  
24 24 // Permission-related cache is stored in sessionStorage or localStorage
25 25 permissionCacheType: CacheTypeEnum.SESSION,
... ...
types/window.d.ts
1 1 import type { App } from 'vue';
2 2  
3 3 declare global {
  4 + declare const __DYNAMIC_IMPORT__: boolean;
4 5 declare interface Window {
5 6 // Global vue app instance
6 7 __APP__: App<Element>;
... ...
vite.config.ts
... ... @@ -21,7 +21,14 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
21 21 // The boolean type read by loadEnv is a string. This function can be converted to boolean type
22 22 const viteEnv = wrapperEnv(env);
23 23  
24   - const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_LEGACY } = viteEnv;
  24 + const {
  25 + VITE_PORT,
  26 + VITE_PUBLIC_PATH,
  27 + VITE_PROXY,
  28 + VITE_DROP_CONSOLE,
  29 + VITE_LEGACY,
  30 + VITE_DYNAMIC_IMPORT,
  31 + } = viteEnv;
25 32  
26 33 const isBuild = command === 'build';
27 34  
... ... @@ -68,6 +75,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig =&gt; {
68 75 define: {
69 76 // setting vue-i18-next
70 77 // Suppress warning
  78 + __DYNAMIC_IMPORT__: VITE_DYNAMIC_IMPORT,
71 79 __VUE_I18N_LEGACY_API__: false,
72 80 __VUE_I18N_FULL_INSTALL__: false,
73 81 __INTLIFY_PROD_DEVTOOLS__: false,
... ...