vue項目熱更新的坑及解決
vue項目熱更新坑
今天在使用vue-cli構(gòu)造的vue項目時，遇到一個坑。
setInterval(() => {
console.log('This is one.')
}, 10000)運行后如下：
這時我們修改其中的代碼，不刷新網(wǎng)頁：
setInterval(() => {
console.log('This is two.')
}, 1000)結(jié)果如下，發(fā)現(xiàn)之前的計時函數(shù)以久存在，熱更新 !== 刷新頁面 ?。?！謹記
vue項目熱更新慢
突然有一天，vue項目跑著跑著，熱更新的時候卡到75%的地方卡好久，一個熱更新要10幾秒，這簡直耽誤開發(fā)進度，不能忍，怎么辦呢？
查找熱更新慢是哪里慢—分析原因
針對這個分析了一下熱更新慢的原因，步驟如下
首先先在package中的啟動命令加上
--progress --watch --colors --profile
先解釋一下這幾個參數(shù)的含義
–progress構(gòu)建進度–watch實時監(jiān)測–profile編譯過程中的步驟耗時時間
加上這個配置，重啟項目，就可以看到耗時了
解決辦法
圖中紅色框出來的地方耗時最嚴重，也就是卡到75%的地方耗時最嚴重，腫么辦呢？
問度娘，大神們說，這樣做
1、安裝babel-plugin-dynamic-import-node插件
$ npm install babel-plugin-dynamic-import-node
2、.babelrc文件里添加配置dynamic-import-node
公司項目腳手架為vue-cli2.0
所以在.babelrc文件里添加配置dynamic-import-node
網(wǎng)上的大神們說，加上就好了，很興奮，終于可以好了，然而，我再跑一遍項目，還是一樣，還是蝸牛的速度，還是卡在75%。。。。。。心塞~~~~~~~
3、改變路由懶加載方式
求助了個大神，大神說是路由太多了，是呀，項目越來越多了，腫么辦，讓試一下用import 懶加載路由，因為我現(xiàn)在用的是require懶加載路由的，如下圖
把下圖中require方式換成import方式
項目再跑一遍，1、2秒就熱更新成功~~淚崩，終于好了，糾其原因，我猜的是安裝的插件babel-plugin-dynamic-import-node，與import路由加載方式配套使用才能發(fā)揮期作用，搞定，撒花·······
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
axios是vue-resource后出現(xiàn)的Vue請求數(shù)據(jù)的插件。下面我們通過本文給大家介紹vue axios用法教程詳解，感興趣的朋友一起看看吧2017-07-07
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
這篇文章給大家分享了vue檢測對象和數(shù)組的變化的相關(guān)知識點與實例代碼，有興趣的朋友參考下。2018-06-06
vue如何在用戶要關(guān)閉當前網(wǎng)頁時彈出提示的實現(xiàn)
這篇文章主要介紹了vue如何在用戶要關(guān)閉當前網(wǎng)頁時彈出提示的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
VUE 實現(xiàn)復制內(nèi)容到剪貼板的兩種方法
這篇文章主要介紹了VUE 實現(xiàn)復制內(nèi)容到剪貼板功能，本文通過兩種方法，給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
Vue源碼中要const _toStr = Object.prototype.toString的原因分析
這篇文章主要介紹了Vue源碼中要const _toStr = Object.prototype.toString的原因分析,在文中給大家提到了Object.prototype.toString方法的原理,需要的朋友可以參考下2018-12-12
Vue-Router2.X多種路由實現(xiàn)方式總結(jié)
下面小編就為大家分享一篇Vue-Router2.X多種路由實現(xiàn)方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue生成二維碼QR?Code的簡單實現(xiàn)方法示例
這篇文章主要為大家介紹了vue生成二維碼QR?Code的實現(xiàn)示例詳情，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue 自適應高度表格的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05