动态导入 页面加载不出来

• 使用import加载组件 页面没有内容

  let data = {
  path: '/' + route.path,
  name: route.name,
  component: () => import(`/src/views${route.components}.vue`),
  meta: meta,
  };
  router.addRoute('base', data);
  

  这是没有找到组件
  因为在配置文件中配置了base路径 上面的路径不是根路径

  export default defineConfig({
  base: '/my-app/',
  server: {
  	host: '0.0.0.0',
  	port: 8080,
  	strictPort: false,
  	open: true,
  	proxy: {
  		'/api': {
  			target: 'http://127.0.0.1:8000',
  			changeOrigin: true,
  			rewrite: (path) => path.replace(/^\/api/, ''),
  		},
  	},
  },
  ...
  })
  

  • 解决方法1 加上这个根路径my-app

    let data = {
    path: '/' + route.path,
    name: route.name,
    component: () => import(`/my-app/src/views${route.components}.vue`),
    	meta: meta,
    };
    router.addRoute('base', data);
    

    使用这种方法虽然能加载出来 但是组件数据是这样的 和正常的不一样 不知道为什么
    正常的组件数据如下：
    使用第2 中方法加载的组件数据是正常的

  • 解决方法2 使用const modules = import.meta.glob('@/views/**/*.vue');

    const modules = import.meta.glob('@/views/**/*.vue');
    const loadComponent = async (path: string) => {
    const module = await (modules[path]() as Promise<{ default: any }>);
    return module.default;
    };
    
    ...
    let data = {
    	path: '/' + route.path,
    	name: route.name,
    	component: await loadComponent(`/src/views${route.components}.vue`),
    	meta: meta,
    };
    router.addRoute('base', data);
    

• 将分装好的数据 动态添加 数据如下

  {
  "path": "/",
  "name": "",
  "component": {
      "__name": "AppLayout",
      "__hmrId": "b0d177fe",
      "__scopeId": "data-v-b0d177fe",
      "__file": "G:/项目/vue3-project/src/views/layout/AppLayout.vue"
  },
  "meta": {
      "requiresAuth": true
  },
  "children": [
      {
          "path": "/home",
          "name": "首页",
          "component": {
              "__hmrId": "0ef3d734",
              "__file": "G:/项目/vue3-project/src/views/home/index.vue"
          },
          "meta": {
              "title": "首页",
              "icon": "House",
              "hidden": false,
              "requiresAuth": false
          }
      },
      ...
  ]
  }
  

  使用router.addRoute() 页面没效果

  router.addRoute(storemenusList.routersList);
  

  文档中用了等效于估计不能整个添加 只能一个一个添加

  

• 最重要的一个点
  将静态路由中的错误页面（404） 去掉放到 添加动态路由的最后添加 否则页面一直会是404

  ...
  export const generateRoutes = async (route: MenuItem[]) => {
  let routes = route.filter((v) => v.level == 2);
  const moduleRouterKeys = Object.keys(modules);
  const res = [];
  const baseRouter: premissionRouter[] = [
  	{
  		path: '/',
  		name: '',
  		component: await loadComponent('/src/views/layout/AppLayout.vue'),
  		meta: {
  			requiresAuth: true,
  		},
  	},
  ];
  router.addRoute({
  	path: '/',
  	name: 'base',
  	component: await loadComponent('/src/views/layout/AppLayout.vue'),
  	meta: {
  		requiresAuth: true,
  	},
  });
  for (const route of routes) {
  	const meta = {
  		title: route.name,
  		icon: route.icon,
  		hidden: !route.shown,
  		requiresAuth: false,
  	};
  	let data = {
  		path: '/' + route.path,
  		name: route.name,
  		component: await loadComponent(`/src/views${route.components}.vue`),
  		meta: meta,
  	};
  	router.addRoute('base', data);
  	res.push(data);
  }
  
  router.addRoute({
  	path: '/:xxx(.*)*',
  	name: 'ErrorPage',
  	meta: {
  		requiresAuth: false,
  	},
  	component: await loadComponent('/src/views/ErrorPage.vue'),
  });
  baseRouter[0].children = res;
  return baseRouter;
  };