vue3+ts+vite 路由懒加载

在 Vue3 + TypeScript + Vite 中实现路由懒加载，你可以按照下面的步骤进行操作：

1. 安装 `@types/webpack-env`，因为我们需要使用 webpack 的 `require.ensure()` 方法。

npm install @types/webpack-env --save-dev

2. 在 `src/router/index.ts` 中定义路由懒加载的函数。

import { RouteRecordRaw } from 'vue-router';

const Home = () => import('@/views/Home.vue');
const About = () => import('@/views/About.vue');

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/lazy',
    name: 'Lazy',
    component: () => import('@/views/Lazy.vue')
  } // 懒加载的路由
];

export default routes;

在这个例子中，我们使用了箭头函数来定义懒加载的组件。注意，`import()` 必须使用默认导出方式。

3. 在 `src/main.ts` 中导入路由配置，并使用 `createRouter()` 方法创建路由实例。

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import routes from './router';

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

createApp(App).use(router).mount('#app');

这里我们使用了 `createWebHistory()` 创建了 HTML5 history 模式的路由实例。

现在你已经成功地实现了 Vue3 + TypeScript + Vite 中的路由懒加载。如果你还有其他问题或疑问，请随时问我。