vue-cli3熱更新失效問(wèn)題

公司的一個(gè)使用vue-cli3搭建的項(xiàng)目一直無(wú)法熱更新，每次保存代碼后都需要手動(dòng)刷新頁(yè)面才能看到修改之后的頁(yè)面，作為一個(gè)強(qiáng)迫癥晚期患者，那肯定是忍不了。經(jīng)過(guò)個(gè)人研究學(xué)習(xí)，修復(fù)好了項(xiàng)目熱更新問(wèn)題，因此寫(xiě)下博客分享給各位。

內(nèi)容都是本人看文檔查資料后自己理解的，難免有理解不到位的地方，也歡迎大家指出錯(cuò)誤之處，一起學(xué)習(xí)共同進(jìn)步。

項(xiàng)目開(kāi)發(fā)環(huán)境背景

我司項(xiàng)目由于相關(guān)原因需要前端開(kāi)發(fā)的時(shí)候使用nginx代理，例如項(xiàng)目啟動(dòng)后為http://localhost:8080，配置nginx后前端訪問(wèn)https://www.xxx.com

排查步驟

sockjs-client

應(yīng)該有不少使用vue腳手架創(chuàng)建項(xiàng)目的小伙伴都遇到過(guò)這么一個(gè)問(wèn)題，/sockjs-node/info?t=在瀏覽器控制臺(tái)一直報(bào)錯(cuò)。在百度之后大家的解答出人意料的一致：

注釋掉/node_modules/sockjs-client/dist/sockjs.js這個(gè)文件第1605行的self.xhr.send(payload)

事實(shí)上我司項(xiàng)目中也是這么處理的，那會(huì)不會(huì)是sockjs-client導(dǎo)致的熱更新失效呢？

答案是：是的。

在將源碼注釋去掉后，經(jīng)過(guò)測(cè)試發(fā)現(xiàn)：

訪問(wèn)localhost:8080不會(huì)報(bào)錯(cuò)，訪問(wèn)代理地址http://www.xxx.com也不會(huì)報(bào)錯(cuò)，

而訪問(wèn)代理地址https://www.xxx.com就會(huì)開(kāi)始報(bào)錯(cuò)。

而且對(duì)比瀏覽器network中報(bào)錯(cuò)請(qǐng)求的地址可以發(fā)現(xiàn)：

前端頁(yè)面地址為localhost:8080或http://www.xxx.com時(shí)sockjs請(qǐng)求的地址是http://xxxxx(本機(jī)ip地址)，

頁(yè)面地址為https://www.xxx.com時(shí)sockjs請(qǐng)求的地址是https://xxxxx(本機(jī)ip地址)。

devServer.public

查閱webpack文檔，發(fā)現(xiàn)這個(gè)配置項(xiàng)：

文檔上說(shuō)明，如果開(kāi)發(fā)服務(wù)器被nginx代理，則可配置該項(xiàng)。那就加上試一下

// vue.config.js

devServer: {

public: 'www.xxx.com:443',

}

重啟項(xiàng)目，類(lèi)似/sockjs-node/info?t=格式的報(bào)錯(cuò)沒(méi)有了，但出現(xiàn)了新的錯(cuò)誤：

WebSocket connection to 'wss://www.xxx.com/sockjs-node/244/gymxpeaf/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

nginx

在github上找到是nginx配置問(wèn)題，添加如下配置：

# 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;

}

至此，熱更新問(wèn)題解決。

其他

vue.config.js中的css配置項(xiàng)

在開(kāi)發(fā)環(huán)境需要關(guān)閉css分離

// 是否為生產(chǎn)環(huán)境

const isProduction = process.env.NODE_ENV === 'production'

module.exports = {

css: {

// 是否開(kāi)啟css分離 在開(kāi)發(fā)環(huán)境開(kāi)啟會(huì)導(dǎo)致熱更新異常

extract: isProduction,

// 在瀏覽器審查時(shí)是否顯示當(dāng)前css文件路徑 開(kāi)發(fā)環(huán)境建議開(kāi)啟 不影響熱更新

sourceMap: true,

},

// 生產(chǎn)環(huán)境是否生成sourceMap文件

productionSourceMap: false,

...

}

本人在錯(cuò)誤排查過(guò)程中也試過(guò)這兩個(gè)配置項(xiàng)，沒(méi)有效果；在查閱資料過(guò)程中部分開(kāi)發(fā)者表示用了這個(gè)有效。

同類(lèi)型問(wèn)題解答

總結(jié)

以上就是本次解決項(xiàng)目熱更新問(wèn)題的全過(guò)程，很多地方本人還是一知半解，只是把結(jié)果搞出來(lái)了。文章中有任何問(wèn)題也歡迎留言討論 ：)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。