[[399401]]

緣起

我打算使用自己搭建的V3項(xiàng)目腳手架parcel-vue-app搞一搞項(xiàng)目，畢竟是剛出來，很多東西都不完善，只能自己不斷嘗試。于是，使用parcel-vue-cli開始初始化項(xiàng)目(如果有小伙伴對(duì)parcel-vue-app感興趣的，文末有源碼地址)。

...項(xiàng)目搭建完畢

啟動(dòng)地址是http://localhost:3000/，一頓操作之后，頁面也能很快地更新數(shù)據(jù)。不得不覺得Parcel在這方面做得還是很不錯(cuò)的。于是這時(shí)，想到了尤大大開發(fā)的Vite，決定比較一下。于是進(jìn)入vite官方網(wǎng)站，下載了vite@2.3.0，選擇的是vue模板。這時(shí)，根據(jù)提示進(jìn)入項(xiàng)目目錄，然后運(yùn)行yarn dev命令啟動(dòng)項(xiàng)目。一眨眼的功夫就啟動(dòng)起來，不得不說太厲害了。這時(shí)，我看到了這行綠字http://localhost:3000/，什么?給我第一感覺是vite難道沒有占用端口號(hào)檢測(cè)機(jī)制，不會(huì)吧!不敢相信的我開始找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 會(huì)自動(dòng)嘗試下一個(gè)可用的端口。另外我還不放心strictPort設(shè)為true，這樣若端口已被占用則會(huì)直接退出，而不是嘗試下一個(gè)可用端口。這應(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)該不會(huì)有事，于是我又興致勃勃地啟動(dòng)了vite@2.0.4項(xiàng)目，端口號(hào)是3000，接著我又啟動(dòng)了vite@2.3.0項(xiàng)目(實(shí)際是2.3.1，package.json與node_modules版本不一致，這里暫且忽略)，接著就發(fā)生了下面這種事。

當(dāng)時(shí)的感覺就是，這種事怎么讓我遇到了。我還是不死心，我試試VueCLI跟Vite對(duì)比一下。

Vite項(xiàng)目這里使用的是vite@2.3.0，結(jié)果發(fā)現(xiàn)，vite可以檢測(cè)到，并且成功阻止了。

接著，我又創(chuàng)建了一個(gè)vite@2.3.0項(xiàng)目，打算看下相同版本的項(xiàng)目會(huì)不會(huì)出現(xiàn)這種情況。

然后，我又啟動(dòng)了一個(gè)vite@2.0.5的項(xiàng)目，發(fā)現(xiàn)并不是我們預(yù)想到的3002端口，還是3000端口。于是我覺得入坑了~，這里可能是之前vite遺留的bug，現(xiàn)在的新版本解決了。

解決完一個(gè)疑惑，但是最初那個(gè)疑惑還沒有解決。就是啟動(dòng)parcel2項(xiàng)目，vite項(xiàng)目(vite@2.3.0)檢測(cè)不到parcel2已占用端口。

于是，就去github上提了一個(gè)issues。

https://github.com/vitejs/vite/issues/3391

緣落

提了一個(gè)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，因此在同一端口中偵聽它時(shí)沒有錯(cuò)誤。

如果在vite中使用--host或--host ::，將獲得與2.2相同的行為，并且將按預(yù)期失敗。您還可以將parcel2設(shè)置為偵聽--host 127.0.0.1，并且還會(huì)收到硬錯(cuò)誤。

我不知道Vite是否應(yīng)該對(duì)此進(jìn)行修復(fù)。諸如sirv-cli之類的其他工具也以相同的方式工作，在這種情況下將無法識(shí)別使用了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指定為“：：”作為臨時(shí)解決方法。

由于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

有了以上兩個(gè)回復(fù)，我暫且在parcel項(xiàng)目中使用--host 127.0.0.1解決了問題。

并且，我又對(duì)parcel-vue-app進(jìn)行了更新，最新版本v1.0.6。也謝謝有了這次經(jīng)歷，讓自己的工具越來越好。

其實(shí)，不光以上兩個(gè)回復(fù)，還有第三個(gè)回復(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.

翻譯為：

以后，請(qǐng)不要直接聯(lián)系Evan。

我們?cè)赩ite周圍有一個(gè)活躍的團(tuán)隊(duì)，每天都在工作/分類問題和PRs，我們決定需要什么來聯(lián)系Evan，這樣他就可以在整個(gè)Vue生態(tài)系統(tǒng)中管理更高層次的東西。

以下是我回復(fù)的話：

Sorry, it won't happen again.

我算是前車之鑒了，大家以后提issues的時(shí)候就不要跟我一樣艾特尤大大。

......

總結(jié)

學(xué)好英語很重要!!!我大部分都是用谷歌翻譯~

要不斷鉆研，說不定你會(huì)學(xué)到很多東西。

還要懂得不要打擾別人，我就是個(gè)反面教材。