webpack to vite 动态路由重构 ？

Question

export const loadView = view => {
  // 路由懒加载
  return () => Promise.resolve(require(`@/views/${view}`).default);
};

在webpack中使用require 这样动态引入组件地址，重构使用vite 的import.meta.glob(@/views/**/*.vue) 替换

const routeAllPathToCompMap = import.meta.glob(`@/views/**/*.vue`)
console.log(routeAllPathToCompMap,'routeAllPathToCompMap')

route.component = routeAllPathToCompMap[`/src/views/${route.component}.vue`]

使用webpack 的处理后的路由地址显示的是这样 而使用vite方式引入的是 导致页面加载不正确
还会导致component路径成了绝对路径

Answer 1

可以参考这个看看，应该是你的组件没有能正确的引入，能否

import { defineAsyncComponent } from 'vue'
...
route.component = defineAsyncComponent(routeAllPathToCompMap[xxx])