解决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 相关文章推荐
javaScript同意等待代码实现心得
Jan 01 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
Feb 05 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
理解JavaScript中的对象
Aug 25 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备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
vue实现简单图片上传
2020/06/30 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
python3爬取各类天气信息
2018/02/24 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
酒店个人培训自我鉴定
2013/12/11 职场文书
给海归自荐信的建议
2013/12/13 职场文书
物流业务员岗位职责
2014/02/08 职场文书
《自然之道》教学反思
2014/02/11 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
高中军训感言400字
2014/02/24 职场文书
大学新生军训方案
2014/05/03 职场文书
电子商务专业自荐信
2014/06/02 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
小学优秀班主任材料
2014/12/17 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python