解决vue动态路由异步加载import组件,加载不到module的问题


Posted in Javascript onJuly 26, 2020

报错信息应该是这样的

webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10)

路由信息由后端给出,那么前端需要动态加载路由,同时component的路径也是后端给出,但是动态加载该路径会报错

如:

// 假如path = '@/views/user'
const com = () => import(path) // 这样会报错哦
const com2 = () = > import('@/views/user') // 这样写死的字符串就可以

原因应该是在webpack,webpack 编译es6 动态引入 import() 时不能传入变量,因为webpack的现在的实现方式不能实现完全动态。

解决办法:

可以通过字符串模板来提供部分信息给webpack,例如import(`@/${path}`), 这样编译时会编译所有@/views下的模块,但运行时确定path的值才会加载,从而实现懒加载。

如果写了@给webpack还是不能识别,那么可能你需要多些几级的路径,如import(`@/views/${path}`)

补充知识:vue中使用import路由懒加载报错解决方法

解决vue动态路由异步加载import组件,加载不到module的问题

一般情况下都会正常运行,但当我们运行npm run dev时却报错

解决vue动态路由异步加载import组件,加载不到module的问题

原因是import属于异步引用组件,需要babel-loader处理

所以我们需要安装

npm install babel-plugin-syntax-dynamic-import -D

这是用来编译import异步引用方法的模块

然后在.babelrc中引入这个插件

{
“plugin”: [‘syntax-dynamic-import']
}

以上这篇解决vue动态路由异步加载import组件,加载不到module的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现登陆遮罩效果的方法
Jul 28 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
javascript中Number的方法小结
Nov 21 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 #Javascript
VUE动态生成word的实现
Jul 26 #Javascript
Element Dialog对话框的使用示例
Jul 26 #Javascript
在vue中使用防抖函数组件操作
Jul 26 #Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 #Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 #Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 #Javascript
You might like
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python去掉行尾的换行符方法
2017/01/04 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
工程专业求职自荐书范文
2014/02/08 职场文书
投资协议书范本
2014/04/21 职场文书
临床专业自荐信
2014/06/22 职场文书
论文致谢词范文
2015/05/14 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python