webpack5和vue2中路由懒加载的问题

自己闲的无聊搭建的一个项目,项目中vue-router使用()=>import方式来做路由懒加载,实际上并没有做到按需加载。

但是如果切换成require.ensure的方式却可以,这是babel的配置 ,有没有大佬帮忙看下这是什么原因导致的吗?

版本: "webpack": "^5.58.0", "vue-router": "^3.2.0",
简单的demo地址https://github.com/songjie55/...

阅读 3.1k
1 个回答
✓ 已被采纳新手上路,请多包涵

问题已解决,对比vue-cli脚手架中的配置,发现是tsconfig.json中的module写的是commonjs(指定生成代码的模板标准),所以路由中的懒加载方式需要用commonjs的require.ensure来实现,改成esnext(es6模块化规范)就可以使用Import来懒加载组件了,顺带提一句webpack5现在会自动给懒加载的文件分配chunkname就不需要手动自己去写,通常在开发环境下chunkname就是文件的路径,生产环境下就是hash了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题