vue3專案執行時報錯sockjs-node-info

語言: CN / TW / HK

使用 @vue/cli 腳手架建立的專案,前段時間執行都正常,今天執行時一直報 sockjs-node/info 跨越,很是奇怪:

網上一搜,很多人都遇到這個的問題,很多網友也給出瞭解決方法,但是常見的幾種方法配置實踐後證明都是存在一定問題的,比如以下最常見解決方法,

  1. 找到/node_modules/sockjs-client/dist/sockjs.js
  2. 找到程式碼的 1605行
     try {
      //  self.xhr.send(payload); 把這裡注掉
      } catch (e) {
        self.emit('finish', 0, '');
        self._cleanup(false);
      }
    
  3. 重新整理,重啟,不再在報錯。

<font color="red">: 這個方式是網上常提到的,如此操作執行程式碼後,發現錯誤確實不存在了,但是頁面也沒有熱更新了, 顧此失彼不可取。</font>

在網上找了很久最後還是在 vue issues 找到的答案

報錯分析

首先,sockjs-node是何方神聖?不難查出,sockjs-node是一個JavaScript庫,提供類似於WebSocket的物件,一個一致的跨瀏覽器的JavaScript的API,無論是否使用WebSockets, 該API都會在瀏覽器和Web伺服器之間建立了一個低延遲、全雙工的瀏覽器和web伺服器之間通訊通道。 那麼在各端表現為:

npm run serve 啟動服務後會預設生成兩個服務地址,localnetwork , 然 network 無法訪問到。

啟動專案時,會預設連續不斷的請求 network/sockjs-node/info?t=16081705,通知瀏覽器專案檔案有更改進行重新整理,然而 network 是無法訪問到的, 所以肯定會報錯。

解決辦法:

設定 devServer->host 引數,使得 local 地址與 network 地址一致即可

devServer{
    host:"localhost"
}