vue-cli3熱更新失效

vue-cli3熱更新失效問題

公司的一個使用vue-cli3搭建的項目一直無法熱更新，每次保存代碼后都需要手動刷新頁面才能看到修改之后的頁面，作為一個強迫症晚期患者，那肯定是忍不了。經過個人研究學習，修復好了項目熱更新問題，因此寫下博客分享給各位。

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

項目開發環境背景

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

排查步驟

sockjs-client

應該有不少使用vue腳手架創建項目的小伙伴都遇到過這么一個問題，/sockjs-node/info?t=在瀏覽器控制台一直報錯。在百度之后大家的解答出人意料的一致：
注釋掉/node_modules/sockjs-client/dist/sockjs.js這個文件第1605行的self.xhr.send(payload)

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

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

而且對比瀏覽器network中報錯請求的地址可以發現：
前端頁面地址為localhost:8080或http://www.xxx.com時sockjs請求的地址是http://xxxxx（本機ip地址），
頁面地址為https://www.xxx.com時sockjs請求的地址是https://xxxxx（本機ip地址）。

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

總結

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