解决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 覆盖和重载 函数
Sep 25 Javascript
javascript 解析url的search方法
Feb 09 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
一个网马的tips实现分析
Nov 28 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
微信小程序保存多张图片的实现方法
Mar 05 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 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
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
多广告投放代码 推荐
2006/11/13 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
计算机相关的自我评价
2014/01/15 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
档案室主任岗位职责
2014/02/12 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
毕业证委托书范文
2014/09/26 职场文书
员工家属慰问信
2015/03/24 职场文书
2015初中团委工作总结
2015/07/28 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库