解决vue动态路由异步加载import组件,加载不到mod
报错信息应该是这样的
webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10)
路由信息由后端给出,那么前端需要动态加载路由,同时ponent的路径也是后端给出,但是动态加载该路径会报错
如:
// 假如path =
const = () => import(path) // 这样会报错哦
const 2 = () = > import() // 这样写死的字符串就可以
原因应该是在webpack,webpack 编译es6 动态引入 import() 时不能传入变量,因为webpack的现在的实现方式不能实现完全动态。
解决办法:
可以通过字符串模板来提供部分信息给webpack,例如import(}`), 这样编译时会编译所有@/views下的模块,但运行时确定path的值才会加载,从而实现懒加载。
如果写了@给webpack还是不能识别,那么可能你需要多些几级的路径,如import(}`)
补充知识:vue中使用import路由懒加载报错解决方法
一般情况下都会正常运行,但当我们运行npm run dev时却报错
原因是import属于异步引用组件,需要babel-loader处理
所以我们需要安装
npm install babel-plugin-syntax-dynamic-import -D
这是用来编译import异步引用方法的模块
然后在.babelrc中引入这个插件
{ “plugin”: [‘syntax-dynamic-import'] }
以上这篇解决vue动态路由异步加载import组件,加载不到module的问题就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程