解决vue动态路由异步加载import组件,加载不到module的问题
作者:Cookysurongbin 发布时间:2024-05-29 22:45:37
报错信息应该是这样的
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路由懒加载报错解决方法
一般情况下都会正常运行,但当我们运行npm run dev时却报错
原因是import属于异步引用组件,需要babel-loader处理
所以我们需要安装
npm install babel-plugin-syntax-dynamic-import -D
这是用来编译import异步引用方法的模块
然后在.babelrc中引入这个插件
{
“plugin”: [‘syntax-dynamic-import']
}
来源:https://blog.csdn.net/Cookysurongbin/article/details/99307933
猜你喜欢
- 目录循环语句单分支如何使用双分支结构多分支的使用While 循环拳击游戏循环:总结循环语句多分支选择流程 If-else语句单分支如何使用#
- phpcms中自带的评论插件很好用!但是样式个人感觉丑的狠,百度一下也没能找到解决方式,也许是自己的搜索方式不对,于是自己就研究了研究,这里
- 下载和安装安装 WTForms 最简单的方式是使用 easy_install 和 pip:easy_install WTForms# orp
- 来自某个nb招聘的题目:请给Array本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重
- 核心代码--下面我演示下MySQL中的排序列的实现--测试数据CREATE TABLE tb(score INT);INSERT tb SE
- 如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值:<code class="langua
- 最近在研究pathon的命令行解析工具,argparse,它是Python标准库中推荐使用的编写命令行程序的工具。以前老是做UI程序,今天试
- 在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于"可视化"和操作简便,使用的朋友依然很多,今天罗列一
- 熵值法也称熵权法,是学术研究,及实际应用中的一种常用且有效的编制指标的方法。1.简单理解 信息熵机器学习中的决策树算法是对信息熵的一种典型的
- 前言前面写过一篇用Python制作PPT的博客,感兴趣的可以参考用Python制作PPT这篇是关于用Python进行数据可视化的,准备作为一
- 本文实例讲述了Python实现的删除重复文件或图片功能。分享给大家供大家参考,具体如下:通过python爬虫或其他方式保存的图片文件通常包含
- 最常用的遍历方式为for语句(也有递归、while方式)。当我们遍历一个数组的时候,我们一般会这么做:var arr = [1,2,3,4,
- 1.学习sql之前回忆一下,什么是变量?变量:能存储数据的值。变量是一块内存空间的表示。数组一连串空间变量是存储数据的容器(通俗讲)2.变量
- 一、观察者模式观察者模式,必须包含 “观察者” 和 “被观察者&rdqu
- 最近很多小伙伴在尝鲜chatGPT,使用中遇到网站的1020的错误码,博主也遇到了相似的问题,不同的人运行环境不一样,可能解决方案不一样,接
- IE>6 及其它浏览器不在此文论述范围内。img 的 onload 事件,是当图片加载完成之后,就处触发。img.complete 这
- 本篇我们将学习简单的json数据的存储首先我们需要引入json模块:import json这里我们模拟一个常见常见,我们让用户输入用户名、密
- 模块 定义计算机在开发过程中,代码越写越多,也就越难以维护,所以为了编写可维护的代码,我们会把函数进行分组,放在不同的文件里。在python
- 本文实例讲述了python迭代器常见用法。分享给大家供大家参考,具体如下:迭代器迭代是访问集合元素的一种方式。迭代器是一个可以记住遍历的位置
- 前面已经介绍了关于Dreamweaver MX 2004的基本操作