vue router 配合 vite 实现路由按需加载的核心是使用 component: () => import('@/views/home.vue') 替代静态引入，vite 自动识别并生成独立 chunk；须避免顶层调用或不可预测动态路径，推荐结合 import.meta.glob 显式声明范围，并添加 loading 与 error 处理。
Vue Router 配合 Vite 实现路由组件按需异步加载，核心就是用动态 import() 替代静态引入，让每个路由组件只在被访问时才加载、打包为独立 chunk。Vite 原生支持该语法，无需额外插件或复杂配置。
路由配置中直接写函数式 import
在 router/index.ts（或 .js）中，把 component 字段设为返回 Promise 的函数：
- ✅ 正确写法：
component: () => import('@/views/Home.vue') - ❌ 错误写法：
import Home from '@/views/Home.vue'（会全量打包） - ❌ 错误写法：
component: import('@/views/Home.vue')（顶层执行，失去“按需”意义）
Vite 构建时自动识别这种模式，生成类似 Home.abc123.js 的独立 chunk，首屏不加载它。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章