Vue.js路由深度解析:解决生产环境子路由无法访问的问题

临近下班,发布上线。项目迭代后更新到线上,反馈某些页面点击打不开。 发现都是嵌套的子路由无法访问

但是本地开发环境没问题。猜测本地开发环境做了特殊处理。

栓Q,加班的节奏。🤐

控制台报错:TypeError: i.then is not a function

开启sourceMap后更新到测试服

(只要是build的文件部署后都会报这个错,本地没办法复现,超级麻烦):

TypeError: componentPromise.then is not a function

点击子路由页面控制台报错:
开启sourcemap 再打包 进入报错源码 在vue-router内部。

vue-router在开发环境会自动包一层Promise做兼容处理。 生产环境就不做兼容。所以报错了

调试rawComponent的值

可以发现访问这个子页面的时候它的父组件Layout没加载出来。返回了一个不是promise的箭头函数。执行后rawComponent()返回一个组件。

查看本地的routerMap配置

看源码可以得知 component期望获得一个组件对象,或者一个promise

import的知识:只有动态导入才会返回一个promise。

Layout在这里是静态导入的。再使用箭头函数包裹,返回的只会是一个箭头函数。而不是一个promise。

解决:
疑问
1,查看代码几个月前别人写的。这块一直没人动过。期间一直可以正常访问,突然不行了咋?

未知悬案

2,测试环境 .env.test文件里面是NODE_ENV='test'

按理说 process.env.NODE_ENV 应该也是test才对?
运行的命令:vite build --mode test

看看Vite官网:
process.env.NODE_ENV 是一个在 Node.js 环境中经常使用的环境变量,主要用于区分开发环境和生产环境。 在开发环境中,process.env.NODE_ENV 的值通常被设置为 'development' 在生产环境中,process.env.NODE_ENV 的值通常被设置为 'production'

Vite 官网: cn.vitejs.dev/guide/env-a...

只有build的时候NODE_ENV才会是production。难怪不管什么环境。 只要build后访问就报错。

相关推荐
晓得迷路了2 分钟前
栗子前端技术周刊第 141 期 - Next.js 16.3、npm 安全事件、2026 CSS 现状调查报告结果...
前端·javascript·npm
2601_9657984716 分钟前
Launch Your Wellness App Fast: The Truth About Meditation Source Code
前端·macos·ios·objective-c·cocoa
周小董35 分钟前
[1367]npm 安装 canvas 报错 node-gyp ERR
前端·npm·node.js
智脑API35 分钟前
Codex config.toml check_for_update_on_startup 怎么关闭?离线环境与版本提醒排查
运维·服务器·前端
存在的五月雨1 小时前
前端布局-flex
前端
Zzj_tju2 小时前
Tool-Using LLM 论文精读路线:从 ReAct 到可验证工具调用
前端·react.js·前端框架
To_OC9 小时前
别再瞎写 React Router!7 个高频踩坑点一次性讲透
前端·javascript·react.js
岭南灯火11 小时前
前端通用交互式几何编辑器的开发经验
前端·设计模式·架构
岭南灯火11 小时前
前端通用交互式几何编辑器的设计法则 7 - 设计模式与原则
前端·设计模式·架构
岭南灯火11 小时前
前端通用交互式几何编辑器的设计法则 4 - 绘制、悬停与编辑
前端·设计模式·架构