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

我写了一个简单的路由如下：

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

运行后发现无法正常加载页面。

根据官网的解释

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

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

然后重新启动，发现vue-router懒加载成功，问题解决。