vue3动态路由懒加载Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext

最新推荐文章于 2025-05-19 16:52:19 发布
原创 最新推荐文章于 2025-05-19 16:52:19 发布 · 2.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍在Vue3结合Element Plus进行后台管理系统开发时遇到的动态路由懒加载问题及解决方案。作者尝试了不同方法来实现组件的懒加载，最终通过在路由添加函数内部处理的方式解决了变量动态引入的问题。

项目场景：

最近在使用vue3+elementPlus做后台管理的权限管理，在动态添加路由懒加载出现问题

问题描述：

export const loadView = view => {
   
   
    // 路由懒加载
    return () => import(`@/views/
最低0.47元/天 解锁文章
Vue at webpackEmptyContext 错误
一碗清深的博客
06-05 611
webpack4中动态import不支持变量方式。
Vue路由懒加载报错问题解决
高贵的程序媛
01-06 5602
使用Vue路由懒加载时报了以下错误： 经过百度发现，出现该问题的原因是： import 属于异步引用组件，需要特殊的babel-loader处理 解决办法： 安装babel用来编译import异步引用方法的模块 babel-plugin-syntax-dynamic-import cnpm install babel-plugin-syntax-dynamic-import -D 在.b...
解决Vue Router报错 Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext
https://github.com/Bot80926
08-03 1万+
起因： 拉旧项目重跑发现运行报错，猜测是包更新导致部分写法不兼容。之后发现是原写法在webpack4中不兼容。所以这篇文章主要讲两部分： 1. 如何解决webpack4 动态编译import报错 2. imoort 和 require到底有什么区别？两者是否可以无缝替换？ 一、解决报错 // 原写法 export const loadView = (view) => { return () => import(`@/views/${view}`) } // webpack4.
解决vue动态路由异步加载import组件,加载不到module的问题
10-15
主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用若依前后端分离框架报Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext (index.js:39)错
北冥有雨
09-07 5262
解决方法： 去ruoyi-ui/src/store/modules/permission.js里面修改代码如下 export const loadView = (view) => { // 路由懒加载 // return () => import(@/views/${view}) return (resolve) => require([@/views/${view}], resolve) }
Error:Cannot find module XXX 点击这个页面不好使，其他页面正常点击，本地好使，打完包不好使 解决方法
最新发布
11-15
当遇到特定页面点击无效、本地正常但打包后出现 `Error:Cannot find module XXX` 错误时，通常与 **路由懒加载** 和 **模块路径解析** 相关。以下是系统化的解决方案： #### 解决方案步骤 1. **修改路由懒加载语法...
Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)，其实就是路由在后台配置 前端请求接口后 生成路由表
lzfengquan的博客
02-14 2万+
最近刚结束一个项目，然后再客户的百般刁难下又增加了项目新需求： 后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由) vue项目实现动态路由的方式大体可分为两种: 1.第一种就是我们前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由) 详情可以看看这个人写的，感觉挺好的https://segmentfault.com/a/1190000009275424,我当时看这个项目看了好久才明白一点逻辑， 因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小
【错误汇总】PYTHON开发
qq_39867399的博客
07-13 2577
记录工作中的一些问题
Vue3.0路由懒加载报错 Cannot read property ‘apply‘ of undefined
ChangKyrie的博客
04-06 1954
这里写自定义目录标题项目场景：问题描述：原因分析：解决方案： 项目场景： 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 动态加载路由时报错Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext
热门推荐
bihaiyanyu的专栏
11-16 2万+
前几天写代码，写着写着，突然报了一个很奇怪的bug： 解决方法如下： 删除项目下面的label.config.js 授人以鱼不如授人以渔，以下是排查过程的思路，及排查过程尝试过的方法： 该错误是点左边菜单树的时候报错，打不开页面，开始以为是修改到了路由相关代码导致的，于是各种检查，没有发现任何异常代码。接下来发现更离谱的事情是打包发到测试环境和线上没这个问题，本地死活不行，把代码回退到之前很老的版本，还是报这个错。 接下来梳理报错前到底我做了哪些操作导致这个错误，由于公司是内外网隔离，内网
解决若依部署后出现Error: Cannot find module ‘@/views/xxx‘问题，本地没有问题
yonghuid123453的博客
05-19 941
在若依项目中，本地运行正常但部署到服务器后，点击菜单切换路由时出现加载状态，控制台报错“Error: Cannot find module '@/views/xxx'”。此问题通常由路由懒加载和Webpack版本不兼容引起，Webpack 4不支持变量方式的动态import。，以确保兼容性并解决模块加载失败的问题。中，将动态import语法修改为。
Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext
qq_30346433的博客
12-11 2489
从开源平台上面 clone 一个vue 项目时，登陆后 一直报找不到相对应的 module。 搜了很多，后面终于解决。 export const loadView = (view) => { return () => import(`@/views/${view}`) } 改成如下 export const loadView = (view) => { return (resolve) => require([`@/views/${view}`], resol
vue3动态注册路由，test环境下“Cannot find module“
Annie的博客
07-10 1151
通过如下方式动态注册的路由 { component: () => { return import('../' + component + '.vue'); }, name, meta, path: 'index' } 开发环境和生产环境下没有任何问题。但在测试环境下，报如下错误 经过调试，发现把 import 改为 require 就可以了。 然而too young too simple，在洋洋得意的...
若依vue版菜单点不开 Error Cannot find module ‘@viewssystemuserindex‘
m0_67403272的博客
03-10 3324
若依 vue 版菜单点不开，报错：Error: Cannot find module ‘@/views/system/user/index’ 问题描述 今天运行后端哥哥都爱的若依项目：RuoYi-Vue 的时候，发现可以正常启动，但是左侧菜单点不开，一直在加载中。 然后 F12 一看控制台一顿输出： Error: Cannot find module '@/views/system/user/index' at webpackEmptyContext (index.js:39) at per
vue动态路由加载组件报错Cannot find module ‘xxx‘ at webpackEmptyContext
weixin_43389274的博客
07-01 9630
vue动态路由加载组件时报报错， component = resolve => import(`@/views/${component}`) 这是以前的代码 这样写是没有问题的， 但是webpack4中动态import不支持变量方式，问题就来了 需要将import引入改为require引入 // path格式为 views/todoTask/index; // views前面不能带 /,否则仍会报错 component = resolve => require([`@/${path}.vu
Vue3.0，组件不加载进来，提示Failed to resolve component
weixin_45973228的博客
07-24 1374
import hello from "@/components/hello.vue"; 在网上查找了半天，结果只是单组件不用括号的问题。
vue中使用router动态加载路由找不到文件
Binoculus的博客
05-11 1757
该文章仅为个人踩坑记录，如有代码错误请提出，本人将积极改正。
【Vue3】详细解决方案：找不到模块“@/views/Login.vue”或其相应的类型声明或Failed to resolve import “@/views/Login.vue“
qq_43816375的博客
04-28 7167
在初次使用Vue3的路由懒加载时，可能你遇到了这个报错：找不到模块“@/views/Login.vue”或其相应的类型声明或者Failed to resolve import "@/views/Login.vue"或找不到模块“path”或其相应的类型声明。那么此文章，是此报错的一系列详细解决方案。
vue 动态加载 Error: Cannot find module ‘@/views/xxx‘ at webpackEmptyContext (index.js:39)
Laputa219的博客
07-08 6577
报错： 原来写法： export const loadView = (view) => { return () => import(`@/views/${view}`) } 修改为： export const loadView = (view) => { return (resolve) => require([`@/views/${view}`], resolve) } 原因：webpack 版本问题，webpack4中动态import不支持变量方式 ...
解决Cannot find module '@sentry/webpack-plugin'等模块缺失问题
在使用Vue项目或其它JavaScript项目时，开发者可能会遇到一个常见的错误提示：“Cannot find module '@sentry/webpack-plugin'”。这个问题表明Node.js在运行时无法找到某个依赖模块。解决这类问题通常需要确保项目...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值