Vue Router懒加载失效但预加载正常，Vue CLI4项目路由异常如何解决？

1. 首要修复：拼写错误 #

你提供的懒加载代码中存在拼写错误，将属性名component错写为conponent（缺失字母n），Vue Router无法识别错误的属性名，自然不会渲染对应组件，先将代码修正为：

component: () => import(/* webpackChunkName: "passwordReset" */ "../views/PasswordResetForm")

修正后重新运行项目，大概率可以正常加载组件。

2. 修正后仍不生效的后续排查方案 #

如果改完拼写还是无法正常渲染，按以下顺序排查：

• 路径一致性校验
  你静态导入组件时用的是别名路径@/views/PasswordResetForm，懒加载时用的是相对路径../views/PasswordResetForm，如果你的路由配置文件存放位置发生过变动，相对路径可能指向错误位置。建议统一使用别名写法避免路径错误：

  component: () => import(/* webpackChunkName: "passwordReset" */ "@/views/PasswordResetForm")
  

• 动态导入语法适配
  你项目的webpack版本为3.x，该版本默认不支持ES动态import()语法，需要额外安装babel插件适配：
  1. 安装依赖：

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

  2. 在项目根目录的.babelrc或babel.config.js配置文件的plugins数组中添加插件：

  {
    "plugins": ["syntax-dynamic-import"]
  }
  

• 版本兼容校验
  Vue CLI 4默认适配webpack 4版本，你当前项目的webpack 3.x属于跨大版本不匹配，可能会导致chunk加载逻辑异常。如果以上方案都无效，建议将webpack升级到4.x版本适配Vue CLI 4的运行要求。

内容的提问来源于stack exchange，提问作者fahico98