Vue路由懒加载报错问题解决

最新推荐文章于 2023-02-07 15:39:01 发布
最新推荐文章于 2023-02-07 15:39:01 发布
阅读量5.3k 收藏 7
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soul_mate_Y/article/details/103864878
版权
本文介绍了在使用Vue路由懒加载时遇到的错误及其解决方法。首先，错误源于import的异步引用未被正确的babel-loader处理。解决措施包括安装babel-plugin-syntax-dynamic-import插件并在.babelrc中引入。然而，运行时由于mui.min.js文件在严格模式下导致新错误，原因是babel默认转码第三方js文件。最后，通过修改.babelrc配置，忽略第三方JS文件的转码，成功解决问题。
摘要由CSDN通过智能技术生成

使用Vue路由懒加载时报了以下错误：
在这里插入图片描述
经过百度发现，出现该问题的原因是： import 属于异步引用组件，需要特殊的babel-loader处理

解决办法：

  1. 安装babel用来编译import异步引用方法的模块 babel-plugin-syntax-dynamic-import
cnpm install babel-plugin-syntax-dynamic-import -D
  1. 在.bablerc中引入syntax-dynamic-import插件
  {
最低0.47元/天 解锁文章
Yuki-W
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现vue路由懒加载遇到的问题.zip
10-25
实现vue路由懒加载遇到的问题 https://blog.csdn.net/qq_36413371/article/details/102581369
vue-router路由懒加载（解决vue项目首次加载慢）
weixin_34352005的博客
03-05 960
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3动态路由懒加载Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext
mmiaoChong的博客
07-28 2196
项目场景： 最近在使用vue3+elementPlus做后台管理的权限管理，在动态添加路由懒加载出现问题 问题描述： export const loadView = view => { // 路由懒加载 return () => import(`@/views/${view}`); // 报错 // return () => require(`@/views/${view}`); // 报错 // return resolve => requi
vue2路由懒加载解决import引入报错问题
见贤思齐焉，见不贤内自省
06-02 5215
vue2路由懒加载解决import引入报错问题
Vue路由懒加载-列表页跳转到详情页的问题
sscholar的博客
12-12 894
Vue用了路由懒加载，某一个列表页与详情页均懒加载。在列表页存中封面图片时，在所有的封面图片加载完之前，无论如何点击也进入不了详情页。
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue路由history模式解决404问题的几种方法
12-10
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash...
VUE的history模式下除了index外其他路由404报错解决办法
12-10
我们先来看下代码： location / { ... root /dist; ... } try_files首先会判断他是文件，还是一个目录，...vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我
vue-router 按需加载 component: () = import() 报错的解决
01-18
vue的单页面（SPA）项目,必然涉及路由按需的问题。 以前我们是这么做的 //require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件 const Login = r => require.ensure( [], () => r (require(‘../...
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面...
Vue 路由懒加载-问题记录
人与人之间最小的差别是智商，最大的差别是坚持。
09-30 265
使用过程中发现不用路由懒加载，刷新页面的时候 watch 监听 routes 并不会触发。一、微服务中使用懒加载： component: () => import(' ')解决方式：利用immediate：true ，触发 routes 执行。
vue-cli3+typescript+路由懒加载报错问题
weixin_34399060的博客
02-28 658
vue-cli3的版本是3.4.1 出现的情况是网页显示正常，但是终端一直提示找不到模块： 如果去掉路由懒加载的方式，就没有报错： 原因是以前我们习惯直接写文件名而不加后缀， 现在使用ts时就需要写vue文件后缀了，现在加上.vue文件后缀就没有报错了： 转载于:https://www.cnblogs.com/unclefang/p/10451845.html...
Vue - router 懒加载
A_bad_horse的专栏
03-03 143
路由的懒加载 打包构建应用时，Javascript 包会变得很大，影响页面加载 将不同路由对应的组件分割为不同的代码块，当路由被访问时才加载对应的组件，提高了效率 问题描述 1. 路由最后被打包放在js文件中 2. 多个页面放在一个js文件中，导致此页面非常大 3. 一次性从服务器请求此页面，需花费一定时间，用户电脑甚至会出现短暂空白 4. 为避免以上情况，可使用路由懒加载 懒加载3种方式 懒加载代码片段 import Vue from 'vue' import Router from '
Vue3.0路由懒加载报错 Cannot read property ‘apply‘ of undefined
ChangKyrie的博客
04-06 1748
这里写自定义目录标题项目场景：问题描述：原因分析：解决方案： 项目场景： Vue 3.0使用路由懒加载报错 问题描述： 使用Vue-cli3.0搭建项目后，按照常规异步路由使用，控制台报错， 代码： const Login = (resolve: any) => require(['../page/Login/Login.vue'], resolve) const Report = (resolve: any) => require(['../page/ReportView/Report.
关于vue-router懒加载发版后js报404的问题
buyorbye的博客
01-06 1324
最近的项目是基于vue-element-admin创建的，里边涉及到路由懒加载，如 { path: '/login', name: 'login', component: () => import('@/views/login/index'), hidden: true } 在使用过程中发现，本地测试时没问题，但当打包上测试或者发生产时，如果用户原本...
微前端模式下子应用的路由懒加载
qq_44606064的博客
12-13 2236
微前端模式下子应用的路由懒加载
Vue项目中常见问题(63)路由懒加载
qq_46368050的博客
05-26 464
gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 大家根据上传历史进行查找你需要的代码 路由懒加载 地址:路由懒加载 | Vue Router 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。 找到router/routes.js中的代码: //引入一级路由组件 im...
vue路由懒加载的3种方式
qq_36262295的博客
05-09 227
vue 异步组件 ES6 的 import() webpack 的 require.ensure() vue异步组件 vue 异步组件 这种方法主要是使用了 resolve 的异步机制， 用 require 代替了 import 实现按需加载 export default new Router({ routes: [ { path: '/home',', component: (resolve) => require(['@/components/hom
vue 路由懒加载 报错 Loading chunk * failed 组件加载不出来
qq_47956199的博客
02-07 1065
跳转对应的路由，无法跳转，打开控制太发现报错，查看网络发现对应的组件没有获取到，而且获取时间只有4ms就停止获取了，谷歌不会报这样的错误，但是edge会，解决方法(不一定有用)：给请求代码套个try。
vue动态使用import路由懒加载报错解决方法
最新发布
07-24
2. 文件命名错误：Vue路由的懒加载是根据文件的命名约定来识别动态组件的，所以要确保动态组件的文件名符合约定。一般来说，文件名应该以大驼峰或者小驼峰命名，并且应该以`.vue`为后缀。 3. 缺少babel插件：在使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值