vite2+vue3项目遇到的那些坑（持续更新）

vite 动态 import 引入路由文件，生产环境报错

之前在webpack中， 动态生成路由是这么写

routerList.push({
    path: viewConfig.routePath,
    name: viewConfig.routeName,
    component: () => import(`@/${viewConfig.filePath}`)
})

在vite2中， 我也是这么写的， 本地没啥毛病，发到生产环境之后 查阅官方文档及google后， 这么写的

// 引入所有views下.vue文件
const modules = import.meta.glob('../views/**/**.vue');

routerList.push({
    path: viewConfig.routePath,
    name: viewConfig.routeName,
    component: modules[`@/${viewConfig.filePath}`]
})

其他

另附vite2项目仓库地址 github.com/RockChang05…

vite使用alias引入图片不显示的问题

参考：解决vite使用alias引入图片不显示的问题

vite分包打包node_modules，减小vendor.js文件的大小

配置build.rollupOptions.output.manualChunks，对node_modules文件进行分包加载

manualChunks(id) {
    //  id: /Users/zhangpeng/Personal/Study/webservice/web-chang/node_modules/lodash-es/math.default.js
    if (id.includes('node_modules')) {
        // name为模块名称
        const name = id.toString().split('node_modules/')[1].split('/')[0];
        return name;
    }
},

配置前

配置后