vue-cli3熱更新失效問題

公司的一個使用vue-cli3搭建的專案一直無法熱更新，每次儲存程式碼後都需要手動重新整理頁面才能看到修改之後的頁面，作為一個強迫症晚期患者，那肯定是忍不了。經過個人研究學習，修復好了專案熱更新問題，因此寫下部落格分享給各位。

內容都是本人看文件查資料後自己理解的，難免有理解不到位的地方，也歡迎大家指出錯誤之處，一起學習共同進步。

專案開發環境背景

我司專案由於相關原因需要前端開發的時候使用nginx代理，例如專案啟動後為http://localhost:8080，配置nginx後前端訪問https://www.xxx.com

排查步驟

sockjs-client

應該有不少使用vue腳手架建立專案的小夥伴都遇到過這麼一個問題，/sockjs-node/info?t=

事實上我司專案中也是這麼處理的，那會不會是sockjs-client導致的熱更新失效呢？
答案是：是的。

在將原始碼註釋去掉後，經過測試發現：
訪問localhost:8080不會報錯，訪問代理地址http://www.xxx.com也不會報錯，
而訪問代理地址https://www.xxx.com就會開始報錯。

而且對比瀏覽器network中報錯請求的地址可以發現：
前端頁面地址為localhost:8080

devServer.public

查閱webpack文件，發現這個配置項：

文件上說明，如果開發伺服器被nginx代理，則可配置該項。那就加上試一下

// vue.config.js

devServer: {
  public: 'www.xxx.com:443',
}

重啟專案，類似/sockjs-node/info?t=格式的報錯沒有了，但出現了新的錯誤：
WebSocket connection to 'wss://www.xxx.com/sockjs-node/244/gymxpeaf/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

nginx

在github上找到是nginx配置問題，新增如下配置：

# nginx.conf

location / {
    proxy_pass http://localhost:8080;
    
    # 以下是新增配置
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

至此，熱更新問題解決。

其他

vue.config.js中的css配置項

在開發環境需要關閉css分離

// 是否為生產環境
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  css: {
    // 是否開啟css分離 在開發環境開啟會導致熱更新異常
    extract: isProduction,
    // 在瀏覽器審查時是否顯示當前css檔案路徑 開發環境建議開啟 不影響熱更新
    sourceMap: true, 
  },
  
  // 生產環境是否生成sourceMap檔案
  productionSourceMap: false,
  ...
}

devServer.sockHost 與 devServer.sockPort

本人在錯誤排查過程中也試過這兩個配置項，沒有效果；在查閱資料過程中部分開發者表示用了這個有效。

同類型問題解答

連結1

總結

以上就是本次解決專案熱更新問題的全過程，很多地方本人還是一知半解，只是把結果搞出來了。文章中有任何問題也歡迎留言討論 ：）