從給Vite2官方提了一個issues并已被認(rèn)可為Bug，我學(xué)到了什么？
緣起
我打算使用自己搭建的V3項(xiàng)目腳手架parcel-vue-app搞一搞項(xiàng)目，畢竟是剛出來，很多東西都不完善，只能自己不斷嘗試。于是，使用parcel-vue-cli開始初始化項(xiàng)目(如果有小伙伴對parcel-vue-app感興趣的，文末有源碼地址)。
...項(xiàng)目搭建完畢
啟動地址是http://localhost:3000/，一頓操作之后，頁面也能很快地更新數(shù)據(jù)。不得不覺得Parcel在這方面做得還是很不錯的。于是這時，想到了尤大大開發(fā)的Vite，決定比較一下。于是進(jìn)入vite官方網(wǎng)站，下載了vite@2.3.0，選擇的是vue模板。這時，根據(jù)提示進(jìn)入項(xiàng)目目錄，然后運(yùn)行yarn dev命令啟動項(xiàng)目。一眨眼的功夫就啟動起來，不得不說太厲害了。這時，我看到了這行綠字http://localhost:3000/，什么?給我第一感覺是vite難道沒有占用端口號檢測機(jī)制，不會吧!不敢相信的我開始找vite官網(wǎng)的配置。我在vite.config.js文件中添加了這幾行代碼。
- import { defineConfig } from 'vite';
- import vue from '@vitejs/plugin-vue';
- // https://vitejs.dev/config/
- export default defineConfig({
- plugins: [vue()],
- server: {
- port: 3000,
- strictPort: true,
- },
- });
我指定服務(wù)器端口。官方也說了如果端口已經(jīng)被使用，Vite 會自動嘗試下一個可用的端口。另外我還不放心strictPort設(shè)為true，這樣若端口已被占用則會直接退出，而不是嘗試下一個可用端口。這應(yīng)該好了吧!于是，我關(guān)閉vite項(xiàng)目，重啟了下，我看到了下面這幅圖。
于是，我還是不死心，我先關(guān)閉parcel項(xiàng)目，又關(guān)閉了vite項(xiàng)目。
決定從頭開始，首先我打開了之前創(chuàng)建的的vite項(xiàng)目。之前vite項(xiàng)目的版本是2.0.4，我心想版本不一樣應(yīng)該不會有事，于是我又興致勃勃地啟動了vite@2.0.4項(xiàng)目，端口號是3000，接著我又啟動了vite@2.3.0項(xiàng)目(實(shí)際是2.3.1，package.json與node_modules版本不一致，這里暫且忽略)，接著就發(fā)生了下面這種事。
當(dāng)時的感覺就是，這種事怎么讓我遇到了。我還是不死心，我試試VueCLI跟Vite對比一下。
Vite項(xiàng)目這里使用的是vite@2.3.0，結(jié)果發(fā)現(xiàn)，vite可以檢測到，并且成功阻止了。
接著，我又創(chuàng)建了一個vite@2.3.0項(xiàng)目，打算看下相同版本的項(xiàng)目會不會出現(xiàn)這種情況。
然后，我又啟動了一個vite@2.0.5的項(xiàng)目，發(fā)現(xiàn)并不是我們預(yù)想到的3002端口，還是3000端口。于是我覺得入坑了~，這里可能是之前vite遺留的bug，現(xiàn)在的新版本解決了。
解決完一個疑惑，但是最初那個疑惑還沒有解決。就是啟動parcel2項(xiàng)目，vite項(xiàng)目(vite@2.3.0)檢測不到parcel2已占用端口。
于是，就去github上提了一個issues。
https://github.com/vitejs/vite/issues/3391
緣落
提了一個issues，回復(fù)非常快，并且已確認(rèn)Bug。給vite團(tuán)隊(duì)點(diǎn)贊!
以下是回復(fù)內(nèi)容：
回復(fù)1：
Looks like parcel is listening to all address (as --host ::). Vite 2.3 switched the default to listen only to 127.0.0.1, so there isn't an error when listening to it in the same port.
If you use --host or --host :: in vite, you will get the same behavior as with 2.2 and it will fail as you expect. You could also set parcel to listen to --host 127.0.0.1 and also get a hard error.
I don't know if there is something that should be fixed in Vite regarding this. Other tools like sirv-cli also work in the same way, and will not recognize that 3000 is being used in this case.
翻譯為：
看起來parcel2正在偵聽所有地址(如--host：:)。Vite 2.3將默認(rèn)設(shè)置切換為僅偵聽127.0.0.1，因此在同一端口中偵聽它時沒有錯誤。
如果在vite中使用--host或--host ::，將獲得與2.2相同的行為，并且將按預(yù)期失敗。您還可以將parcel2設(shè)置為偵聽--host 127.0.0.1，并且還會收到硬錯誤。
我不知道Vite是否應(yīng)該對此進(jìn)行修復(fù)。諸如sirv-cli之類的其他工具也以相同的方式工作，在這種情況下將無法識別使用了3000。
回復(fù)2：
related to the port-reuse issue of node.
@maomincoding you can specified server.host to '::' as a temporay workaround.
Since 1e604d5b60900098f201f90394445fea55642e74, httpServer will listen to a specified default host caused this issue.
翻譯為：
涉及到節(jié)點(diǎn)的端口重用問題。
@maomincoding可以將server.host指定為“：：”作為臨時解決方法。
由于1e604d5b60900098f201f90394445fea55642e74，httpServer將偵聽導(dǎo)致此問題的指定默認(rèn)主機(jī)。
https://github.com/vitejs/vite/commit/1e604d5b60900098f201f90394445fea55642e74
https://stackoverflow.com/questions/60217071/node-js-server-listens-to-the-same-port-on-0-0-0-0-and-localhost-without-error
有了以上兩個回復(fù)，我暫且在parcel項(xiàng)目中使用--host 127.0.0.1解決了問題。
并且，我又對parcel-vue-app進(jìn)行了更新，最新版本v1.0.6。也謝謝有了這次經(jīng)歷，讓自己的工具越來越好。
其實(shí)，不光以上兩個回復(fù)，還有第三個回復(fù)。
回復(fù)3
For the future, please do not ping Evan directly.
We have an active team around Vite that is working / triaging issues and PRs every day and we decide what is needed to reach Evan so he can manage higher order stuff in the whole Vue ecosystem.
翻譯為：
以后，請不要直接聯(lián)系Evan。
我們在Vite周圍有一個活躍的團(tuán)隊(duì)，每天都在工作/分類問題和PRs，我們決定需要什么來聯(lián)系Evan，這樣他就可以在整個Vue生態(tài)系統(tǒng)中管理更高層次的東西。
以下是我回復(fù)的話：
Sorry, it won't happen again.
我算是前車之鑒了，大家以后提issues的時候就不要跟我一樣艾特尤大大。
......
總結(jié)
學(xué)好英語很重要!!!我大部分都是用谷歌翻譯~
要不斷鉆研，說不定你會學(xué)到很多東西。
還要懂得不要打擾別人，我就是個反面教材。
