Vite初始化项目404问题

问题描述

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

按官方的步骤初始化项目、安装依赖、运行项目，但是调试页面的Get / 404了，命令行没出现异常。

解决方法

1. npm install koa-compose@4.1.0 -D单独安装一次koa-compose的v4.1.0。
2. 然后重新npm run dev，本人的初始化项目的调试页面就看见熟悉的vue初始化页面了。

排错过程

1. 已知信息

• 搜索没有找到相关错误。
• 而且周围人（包括我）按官方步骤有404的也有正常运行的。

2. 推理过程

• 从周围人的反馈看，是否成功运行与操作系统、nodejs版本无关。
• 运行vite不需要其他全局安装包
• src没差别，怀疑安装的包有问题。。。。

3. 验证

• 分别npm list打印404和正常的项目依赖树，对比差异。
• diff结果：正常的├── koa-compose@4.1.0，404的├── koa-compose@4.2.0 。另外，在diff整个文件目录的时候发现package-lock.json中指定的源有区别（404的是taobao源）。

4. 查证：为什么taobao源会超前一个版本？ koa-compose淘宝源 koa-compose npm 4.2.0是一个deprecated版本，而且这一事实taobao源同步到了，只是在发包的时候还是给了最新的兼容版本。

反思

  这个问题持续困扰了我两周，我起初的反应是debug vite，但是除了出现了诡异的中间件注册行为，没有发现具体的问题。但是这不代表debug这条路行不通，我如果知道koa-compose是Compose middleware就可以和行为关联起来。 但是更重要的是通法，基于事实的由浅入深的怀疑推理思路，合理的思路能在多数场景节省时间。 倘若两种情况的依赖树一致再怀疑代码没适配我的环境不迟。