vue路由懒加载失效主因是import()写法不规范：必须为静态字符串参数的函数调用，禁用拼接、变量、多余解构；正确写法为component: () => import('@/views/home.vue')，并可通过webpackchunkname分包。
Vue 路由懒加载失效，八成是因为 import() 写法不规范——它不是普通 import，而是动态导入，必须是函数调用形式，且参数只能是字符串字面量。
❌ 常见错误写法（直接导致懒加载失效）
这些写法会让 Webpack / Vite 无法识别为异步模块，从而回退到同步加载：
-
import('@/views/Home.vue')—— 静态 import，打包时就引入，不懒加载 -
import(`${path}`)或import(dynamicPath)—— 动态字符串，构建时无法静态分析，被当作普通请求，常报错或退化为全量加载 -
() => import('@/views/About.vue').then(module => module.default)—— 多余的.then和.default，Vue Router 期望的是 Promise，而 ES 模块默认导出已是组件本身（尤其在 Vue CLI 4.5+ / Vite 中），强行解构反而可能取错值 -
import('@/views/User/' + id + '.vue')—— 拼接路径，Webpack 无法推断模块范围，懒加载失效，甚至编译报错
✅ 正确的懒加载写法（Vue Router 4 / Vue 3 推荐）
路由配置中 component 字段必须是一个返回 Promise 的函数，且 import() 参数为静态字符串：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章