详解vue-router的Import异步加载模块问题的解决方案


Posted in Javascript onMay 13, 2020

1、问题现象

详解vue-router的Import异步加载模块问题的解决方案

2、出现问题的代码点

详解vue-router的Import异步加载模块问题的解决方案

3、替代方案:

import() 替换成如下:

Promise.resolve().then(()=>require(`@/views/${str}`))

详解vue-router的Import异步加载模块问题的解决方案

4、原因分析

项目在编译时,出现一个警告

详解vue-router的Import异步加载模块问题的解决方案

这个警告的含义:

require接收了一个变量,会报上面的警告,接收一个写死的字符串值时则没有警告!

我们通过控制台查看到import()对应编译过后的代码:

详解vue-router的Import异步加载模块问题的解决方案

从上图可以看到require接收了一个变量,所以运行时出现了警告。

那这样就会报上面找不到对应的模块。

那我们再来看一个import()正确编译过后的代码:

详解vue-router的Import异步加载模块问题的解决方案

通过对比编译过后的代码,可以轻易发现不同点。

花了大量时间,去找node_modules中的那个包版本不一致导致的,有一次尝试成功了, 但回想不起是哪一步操作的呢,再复现的时候,也没对了。先暂时搁置吧,希望对webpack和Babel熟悉的大佬看到,能指点一二了。

所以根据编译过后的代码,以及require的特性,尝试出了一个临时解决方案。

到此这篇关于详解vue-router的Import异步加载模块问题的解决方案的文章就介绍到这了,更多相关vue-router的Import异步加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js兼容标准的表格变色效果
Jun 28 Javascript
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
js实现右键自定义菜单
Dec 03 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 #Javascript
原生JS实现汇率转换功能代码实例
May 13 #Javascript
JavaScript Tab菜单实现过程解析
May 13 #Javascript
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
element中el-container容器与div布局区分详解
May 13 #Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 #Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 #Javascript
You might like
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP获取url的函数代码
2011/08/02 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
tagName的使用,留一笔
2006/06/26 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
python list的index()和find()的实现
2020/11/16 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
上级检查欢迎词
2014/01/18 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
奖学金感谢信
2015/01/21 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript