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就能够和行为关联起来。 可是更重要的是通法，基于事实的由浅入深的怀疑推理思路，合理的思路能在多数场景节省时间。 假若两种状况的依赖树一致再怀疑代码没适配个人环境不迟。