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就能夠和行爲關聯起來。 可是更重要的是通法，基於事實的由淺入深的懷疑推理思路，合理的思路能在多數場景節省時間。 假若兩種狀況的依賴樹一致再懷疑代碼沒適配個人環境不遲。