请问大佬们，在webpack中可以使用require来动态引入，在vite中如何实现类型功能？

Question

在webpack中可以使用require来动态引入，如下
option.js

export default (vm)=>{
  return {
    a: vm.b+vm.c
  }
}

user.vue

const option = require(`/src/option/user/option`).default(this);

在vite中如何实现类型功能？

Answer 1

先通过import.meta.glob获取所有文件

const viewPages = import.meta.glob('/src/views/**/index.vue')

再赋值给路由的component

//item为后端拿到的动态路由，重点是取viewPages的内容 viewPages[`/src/views/${item.path}/index.vue`]
{
    path: item.path,
    name: item.path,
    meta: {
      name: item.name,
      keepAlive: item.keepAlive === '1'
    },
    component: viewPages[`/src/views/${item.path}/index.vue`]
  }

Answer 2

对于 dynamic import 而言，没有无缝替换的解决方案，需要对代码做出一定改造。

就像 Webpack 里你这么用实质上是基于 require.context 实现的，Vite 里实质是基于 Rollup 的 import.meta.glob/import.meta.globEager 实现的。

官方文档看这里：https://vitejs.dev/guide/feat...

实操案例看这里：https://juejin.cn/post/695155...