求助，加载异步组件报错Failed to resolve async component

2017-12-20 05:56:12 9.7k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

weixin_38050048 墨衍会员 · AI 创作全网分发关注 + 加入社区

Angular路由守卫实战指南：CanActivate、CanDeactivate、Resolve、CanLoad四大核心机制详解 Angular路由守卫是保障单页应用状态安全与用户体验连续性的关键机制，其本质是在导航生命周期不同阶段实施声明式控制。从权限校验（CanActivate）到离开防护（CanDeactivate），从数据预加载（Resolve）到懒加载拦截（CanLoad），每类守卫对应特定的工程问题域。掌握它们不仅关乎功能实现，更直接影响应用的健壮性、可维护性与安全性。在真实业务系统中，合理组合使用这些守卫，能有效规避未授权访问、数据丢失、重复请求及模块泄露等典型风险，是构建生产级Angular应用不可或缺的基础能力。阅读详情

我的系统整体有几百个组件和模块，异步组件大概有200个。使用webpack2 + vue2.2.4 + vue-router2.3.0 + vuex2.2.1。vue-router使用hash模式。在一段时间内，某个异步组件会加载失败。然后过几天，这个问题会随机转移到另外一个异步组件上，出错的异步组件不是特定的。只要是从其他组件跳转到这个异步组件就会加载失败。但是加载失败后，F5刷新页面，异步组件又会加载成功。测试过更新vue全家桶到最新和webpack3最新版，还是有这个问题。报错信息： [Vue warn]: Failed to resolve async component: function (){var n={};return t.commit(“loading”,n),e().then(function(e){return n.close(),Promise.resolve(e)}).catch(function(e){return n.close(),Promise.reject(e)})} Reason: TypeError: Cannot read property ‘call’ of undefined 跟踪进去，发现是webpack生成的代码里面有个地方调用报错。modules[moduleId].call这个报错，modules根本没有moduleId对应的值

...全文