vue-cli3+webpack熱更新失效怎么解決

這篇文章主要講解了“vue-cli3+webpack熱更新失效怎么解決”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue-cli3+webpack熱更新失效怎么解決”吧！

vue-cli3+webpack熱更新失效

1.說下起因

A項目中遇到問題，熱更新失效，百思不得其解，查詢搜索vuecli3熱更新失效、vue histroy 模式熱更新失效，網(wǎng)上看到不少方法，npm重新安裝，不要用淘寶鏡像cnpm安裝；npm安裝yarn,再用yarn重新install,yarn serve啟動，在npm run serve 啟動等方法都不好用。

github有類似問題https://github.com/vuejs/vue-cli/issues/1559，有次得到啟發(fā)可能版本不同導(dǎo)致。

對比熱更新正常的項目B的幾個配置文件，重點查看package.json文件，發(fā)現(xiàn)有webpack版本不同。

2.解決方案

初步斷定是webpack版本原因，搜索關(guān)鍵詞就變成了webpack4.0熱更新失效，webpack4.0熱更新開啟，由此查詢查詢嘗試。原因大概是webpack4.0需要手動配置開啟熱更新，默認(rèn)沒有開啟

2.1、局部安裝依賴webpack-dev-server

npm install --save-dev webpack-dev-server

2.2、在webpack.config.js配置相關(guān)參數(shù)

增加devServer的配置

const path = require('path');
 
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'youname.js'
    },
    plugins: [
    ],
    devServer: {
        contentBase: path.join(__dirname, 'page'),
        compress: true,
        port: 8080
    }
};

2.3、在package.json中的scripts對象添加命令，開啟本地服務(wù)

"server": "webpack-dev-server --open"

 如果server有其他命令執(zhí)行，在后面增加這一句命令就可以了

2.4、vue.config.js配置，開啟熱更新

 devServer: {
        disableHostCheck: true,//webpack4.0 開啟熱更新
 }

2.5、最后執(zhí)行npm run server即可，熱更新失效問題解決

不能進行熱更新問題

在vue項目中，之前熱更新還是好的，突然發(fā)現(xiàn)在macos上失敗，修改代碼需要npm run dev進行重啟才能更新，非常影響開發(fā)效率，但是不是所有的頁面都是這樣。

然后發(fā)現(xiàn)一個大坑，文件名稱與實際路徑文件夾名稱大小寫有誤。但是可以運行。

解決辦法

檢查文件夾名稱是否正確，確保引入文件夾名稱與路徑的文件夾名稱大小寫保持一致。

經(jīng)過查找，網(wǎng)上還列舉了一些別的可能引起熱更新失效的解決辦法：

1.添加runtimeCompiler:true屬性,指的是包含運行時編譯器的 Vue 構(gòu)建版本。

2.執(zhí)行

npm run build – --watch（感覺應(yīng)該是沒有什么用，畢竟這是打包的相關(guān)命令） 

感謝各位的閱讀，以上就是“vue-cli3+webpack熱更新失效怎么解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue-cli3+webpack熱更新失效怎么解決這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！