详解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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
javascript脚本调试方法小结
Nov 24 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
JavaScript函数详解
Nov 17 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
Vue.js原理分析之observer模块详解
Feb 17 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
JavaScript 大数据相加的问题
2011/08/03 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
javascript真的不难-回顾一下基础知识
2013/01/15 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
微信小程序使用第三方库Immutable.js实例详解
2016/09/27 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
vue2配置scss的方法步骤
2019/06/06 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
优秀员工年终发言演讲稿
2014/01/01 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
买卖车协议书
2014/04/21 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
大学生年度个人总结
2015/02/15 职场文书
审美与表现自我评价
2015/03/09 职场文书