/** * 通用的别名路径解析工具 * 用于在动态导入时解析 @ 别名路径 */ // 使用 import.meta.glob 预加载所有组件 const viewsModules = import.meta.glob('../views/**/*.vue'); // 创建路径映射表 const pathMap = new Map(); // 初始化路径映射 Object.keys(viewsModules).forEach(relativePath => { // relativePath 示例: ../views/system/users.vue // 统一去掉扩展名进行存储,方便各种格式匹配 const baseNoExt = relativePath.replace('../views/', '').replace('.vue', ''); const baseWithExt = relativePath.replace('../views/', ''); // 1. 存储标准路径 pathMap.set(relativePath, viewsModules[relativePath]); // 2. 存储 @/views 路径 pathMap.set(relativePath.replace('../views', '@/views'), viewsModules[relativePath]); // 3. 存储 /system/users 格式(不带扩展名) pathMap.set(`/${baseNoExt}`, viewsModules[relativePath]); // 4. 存储 system/users 格式(不带扩展名) pathMap.set(baseNoExt, viewsModules[relativePath]); // 5. 存储 /system/users.vue 格式(带扩展名) pathMap.set(`/${baseWithExt}`, viewsModules[relativePath]); // 6. 存储 system/users.vue 格式(带扩展名) pathMap.set(baseWithExt, viewsModules[relativePath]); }); /** * 解析别名路径为实际模块加载器 * @param {string} path - 支持的路径格式: * - @/views/dashboard/index.vue (别名格式) * - /dashboard/index.vue (数据库格式,带前导斜杠) * - dashboard/index.vue (相对格式) * @returns {Function|null} 返回模块加载器函数,找不到时返回 null */ export function resolveComponent(path) { if (!path) return null; // 预处理 path:去掉可能的 .vue 后缀统一查找 const cleanPath = path.replace('.vue', ''); // 尝试直接匹配 const loader = pathMap.get(path) || pathMap.get(cleanPath); if (loader) return loader; // 数据库格式补全匹配 (针对 /system/users) const dbFormat = cleanPath.startsWith('/') ? cleanPath : `/${cleanPath}`; if (pathMap.get(dbFormat)) return pathMap.get(dbFormat); // 模糊匹配:文件名匹配 const fileName = cleanPath.split('/').pop(); for (const [mappedPath, loader] of pathMap.entries()) { if (mappedPath.endsWith(`${fileName}.vue`) || mappedPath.endsWith(fileName)) { return loader; } } return null; } /** * 创建组件加载器 * @param {string} componentPath - 组件路径 * @returns {Function} Vue 路由组件加载函数 */ export function createComponentLoader(componentPath) { const loader = resolveComponent(componentPath); if (loader) return loader; console.error(`❌ [路由错误] 未找到组件: ${componentPath}`); // 返回一个标准的 Vue 组件对象,确保 Router 不报错 return () => Promise.resolve({ name: 'ComponentNotFound', render: () => { import('element-plus').then(El => El.ElMessage.error(`路径错误: ${componentPath}`)); return h('div', { style: 'padding:20px; color:red;' }, `组件路径不存在: ${componentPath}`); } }); } /** * 获取所有已加载的模块路径(用于调试) * @returns {Array} 所有可用的路径列表 */ export function getAllModulePaths() { return Array.from(pathMap.keys()); }