Vue.js 3路由异常求助：线上环境出现未定义相关TypeError

关键背景 #

• 本地运行完全正常，此前数月本地及生产环境均稳定
• 仅推送过无关业务变更，未修改路由相关代码
• 回滚历史版本后问题仍存在，已重启VPS、PM2等服务

报错信息 #

所有错误均来自vue-router.esm-bundler.js:3295，点击路由时先触发split相关错误，再次尝试触发另外两个错误：

• TypeError: Cannot read properties of undefined (reading '__vccOpts')
• TypeError: Cannot use 'in' operator to search for 'displayName' in undefined
• TypeError: Cannot read properties of undefined (reading 'split')

异常表现 #

• 启动应用在组件A时，无法访问路由B，其余路由正常
• 进入路由C后刷新触发Bug，此时可访问B；进入B后刷新，Bug转移到B，又可访问C
• 路由D任何时候均可正常访问，刷新无问题
• 疑似带参数路由存在问题，但无参数的根页面也无法访问带参数的路由B；切换为createHashHistoryMode后问题依旧
• 需先触发某一问题组件的Bug，才能访问之前无法进入的路由

排查解决思路 #

1. 强制同步依赖版本

   • 本地和生产环境的package-lock.json/yarn.lock可能存在版本差异，导致依赖行为不一致。上传本地lock文件到生产环境，执行npm ci或yarn install --frozen-lockfile，确保依赖版本完全匹配
   • 重点核对vue-router、vue的版本，确认生产环境与本地完全一致

2. 清理构建与运行缓存

   • 删除生产环境的dist目录、PM2缓存目录、CDN缓存（若有），避免旧打包文件残留
   • 执行完整构建命令，禁用增量构建，确保所有组件和路由逻辑被重新打包

3. 排查异步组件打包异常

   • 临时将问题路由（B、C）的异步导入改为同步导入，测试是否仍出现错误，判断是否为异步组件打包问题
   • 检查构建工具配置（如Vite的build.rollupOptions），是否存在特殊规则导致部分组件打包不完整

4. 核对运行环境一致性

   • 检查生产环境Node.js版本是否与本地一致，版本差异可能导致模块解析行为异常
   • 查看生产环境的构建日志，排查被忽略的警告或错误（如组件导入路径错误、依赖缺失）

5. 添加路由守卫调试日志

   • 在全局路由守卫（beforeEach、beforeResolve）中添加详细日志，记录当前路由、目标路由、组件实例信息，定位错误触发的具体时机
   • 临时开启生产环境的Vue调试模式，输出更多框架内部日志，辅助定位问题

6. 检查组件全局注册与依赖

   • 确认问题组件B、C依赖的全局组件、注入对象在生产环境中已正确注册
   • 排查组件编译过程，确认__vccOpts等Vue内部属性未被异常修改或丢失

7. 彻底重置PM2进程

   • 执行pm2 delete all彻底清除所有进程，删除PM2日志和缓存目录后，重新部署启动应用，避免进程残留导致的异常

内容的提问来源于stack exchange，提问作者SLR Mod Shop