解决前端可以进入首页,菜单导航无法加载

只适用于部分vue 版菜单点不开,报错:Error: Cannot find module ‘@/views/system/user/index’导致的

在本地可以显示,一切正常,但是打包npm run build:prod 打出dist包,放在服务器上,可以正常进入首页,但是点击菜单导航无法加载

点击F12,打开控制台,检查报错,显示

Error: Cannot find module '@/views/system/user/index'
    at webpackEmptyContext (index.js:39)
    at permission.js:73

有可能是路由懒加载造成的,懒加载代码如图

export const loadView = (view) => { // 路由懒加载
  return () => import(`@/views/${view}`)
}

解决方法

  了解到是 webpack 版本问题,webpack4 不支持变量方式的动态 import ,新版本的使用 require() 来解决此问题。

return (resolve) => require([`@/views/${view}`], resolve)

项目重启,打包到服务器中,我的项目就可以正常使用了。

参考:解决若依vue版菜单点不开 Error: Cannot find module ‘@/views/system/user/index‘错误 - xiexie0812 - 博客园 (cnblogs.com)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue 3前端项目,实现动态路由导航菜单的思路是,在系统提供默认的路由后,登录后读取菜单/路由数据进行加载。可能会出现默认路由与动态路由有重叠的情况,解决方法是覆盖。菜单与路由数据可以合并为一个数据结构。 一般来说,前端项目的路由需要动态注册。因为菜单可能在管理系统维护,还需要与权限绑定。用户登录后,需要动态展示菜单菜单通常与路由相关联,因此,路由需要动态注册。 具体实现的步骤如下: 1. 创建一个名为setup.js的文件,用于组装路由和菜单。 2. 导入默认路由和统一命名的首页路由项。 3. 导入具体业务系统的路由。 4. 在导出的函数,获取动态路由。可以从指定文件加载或从后端获取。 5. 对齐首页路由项,即使默认路由与业务路由的首页保持一致的命名。 6. 遍历动态路由项,并使用router.addRoute()方法添加动态路由。 下面是一个示例代码: ```javascript import fixItems from "./default"; // 默认路由 import { HomeName } from "./default"; // 统一命名首页路由项 import projectItems from "@/modules/router"; // 具体业务系统的路由 export default (router) => { // 获取动态路由 const dynaItems = getDynamicItems(); // 对齐首页路由项 adpatHome(HomeName, dynaItems); // 添加动态路由 dynaItems.forEach((value) => { router.addRoute(value); }); }; const getDynamicItems = () => { /* 获取动态路由,从指定文件加载或从后端获取 */ return projectItems; }; // 默认路由与业务路由对齐首页的路由信息 // 所谓对齐,就是大家的name保持一致,这样才能保证动态加入的路由项,覆盖掉前面的path和name相同的路由 const adpatHome = (HomeName, dynaItems) => { let home = dynaItems.filter((item) => { return item.path === "/"; }); if (home.length > 0 && home

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值