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,

...

}

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

同類型問題解答

總結

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

總結

以上是生活随笔為你收集整理的vue热更新无法关闭_vue-cli3热更新失效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。