【vue-router踩坑】使用vite打包项目vue-router的懒加载无效

问题如下

import { createWebHistory, createRouter } from 'vue-router'
export const constantRoutes = [
    {
        path: '/convert',
        component: () => import('@/views/GdalConvert'),
        name: 'Convert',
        meta: { keepAlive: false }
    }
]
const router = createRouter({
    history: createWebHistory(import.meta.env.VITE_APP_BASE_PATH),
    routes: constantRoutes
});
export default router;

开发环境下运行正常，生产环境下运行后，发现无法正常加载页面。

根据官网的解释

那么我们尝试安装syntax-dynamic-import插件，运行

npm install --save-dev @babel/plugin-syntax-dynamic-import

然后重新打包上线，发现vue-router懒加载成功，问题解决。