网络编程
位置:首页>> 网络编程>> JavaScript>> 解决vue动态路由异步加载import组件,加载不到module的问题

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

作者:Cookysurongbin  发布时间:2024-05-29 22:45:37 

标签:vue,路由,加载,import,module

报错信息应该是这样的

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']
}

来源:https://blog.csdn.net/Cookysurongbin/article/details/99307933

0
投稿

猜你喜欢

  • 目录循环语句单分支如何使用双分支结构多分支的使用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.变量
  • 一、观察者模式观察者模式,必须包含 &ldquo;观察者&rdquo; 和 &ldquo;被观察者&rdqu
  • 最近很多小伙伴在尝鲜chatGPT,使用中遇到网站的1020的错误码,博主也遇到了相似的问题,不同的人运行环境不一样,可能解决方案不一样,接
  • IE>6 及其它浏览器不在此文论述范围内。img 的 onload 事件,是当图片加载完成之后,就处触发。img.complete 这
  • 本篇我们将学习简单的json数据的存储首先我们需要引入json模块:import json这里我们模拟一个常见常见,我们让用户输入用户名、密
  • 模块 定义计算机在开发过程中,代码越写越多,也就越难以维护,所以为了编写可维护的代码,我们会把函数进行分组,放在不同的文件里。在python
  • 本文实例讲述了python迭代器常见用法。分享给大家供大家参考,具体如下:迭代器迭代是访问集合元素的一种方式。迭代器是一个可以记住遍历的位置
  •        前面已经介绍了关于Dreamweaver MX 2004的基本操作
手机版 网络编程 asp之家 www.aspxhome.com