解决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 相关文章推荐
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
小程序实现发表评论功能
Jul 06 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 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
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
vue-router单页面路由
2017/06/17 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
Python读写文件基础知识点
2019/06/10 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
python批量修改xml属性的实现方式
2020/03/05 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
自荐信模版
2013/10/24 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
班组建设经验交流材料
2014/05/12 职场文书
倡导文明标语
2014/06/16 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书