详解vue-router的Import异步加载模块问题的解决方案
更新时间：2020年05月13日 14:11:07 作者：Java技术干货
这篇文章主要介绍了详解vue-router的Import异步加载模块问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1、问题现象
2、出现问题的代码点
3、替代方案：
把import() 替换成如下：
Promise.resolve().then(()=>require(`@/views/${str}`))
4、原因分析
项目在编译时，出现一个警告
这个警告的含义：
require接收了一个变量，会报上面的警告，接收一个写死的字符串值时则没有警告！
我们通过控制台查看到import()对应编译过后的代码：
从上图可以看到require接收了一个变量，所以运行时出现了警告。
那这样就会报上面找不到对应的模块。
那我们再来看一个import()正确编译过后的代码：
通过对比编译过后的代码，可以轻易发现不同点。
花了大量时间，去找node_modules中的那个包版本不一致导致的，有一次尝试成功了， 但回想不起是哪一步操作的呢，再复现的时候，也没对了。先暂时搁置吧，希望对webpack和Babel熟悉的大佬看到，能指点一二了。
所以根据编译过后的代码，以及require的特性，尝试出了一个临时解决方案。
到此这篇关于详解vue-router的Import异步加载模块问题的解决方案的文章就介绍到这了,更多相关vue-router的Import异步加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
这篇文章主要介绍了vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理,需要的朋友可以参考下2017-03-03
探通过本篇文章给大家探讨不同场景下组件间的数据“交流”的Vue实现方法，感兴趣的朋友一起看看吧2017-08-08
本文将介绍父组件与子组件之间传递数据的四种方法,以一个简单的小demo为例,通过实例全方位解析和代码演示,便于大家理解,需要的朋友可以参考下2024-07-07
Vue3使用路由及配置vite.alias简化导入写法的过程详解
这篇文章主要介绍了Vue3使用路由及配置vite.alias简化导入写法，本文通过实例代码给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11
在现代Web开发中,前端应用经常需要从后端接口获取图片数据,下面这篇文章主要介绍了VUE前端如何处理后端接口返回的图片的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
本文主要介绍了vue-admin-template解决登录和跨域问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了vue + element ui实现播放器功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue路由传参的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue3 Teleport 组件的实践及原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了ant design vue的form表单取值方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
最新评论