關(guān)于vue-cli3+webpack熱更新失效及解決
vue-cli3+webpack熱更新失效
1.說下起因
A項(xiàng)目中遇到問題，熱更新失效，百思不得其解，查詢搜索vuecli3熱更新失效、vue histroy 模式熱更新失效，網(wǎng)上看到不少方法，npm重新安裝，不要用淘寶鏡像cnpm安裝；npm安裝yarn,再用yarn重新install,yarn serve啟動(dòng)，在npm run serve 啟動(dòng)等方法都不好用。
github有類似問題https://github.com/vuejs/vue-cli/issues/1559，有次得到啟發(fā)可能版本不同導(dǎo)致。
對(duì)比熱更新正常的項(xiàng)目B的幾個(gè)配置文件，重點(diǎn)查看package.json文件，發(fā)現(xiàn)有webpack版本不同。
2.解決方案
初步斷定是webpack版本原因，搜索關(guān)鍵詞就變成了webpack4.0熱更新失效，webpack4.0熱更新開啟，由此查詢查詢嘗試。原因大概是webpack4.0需要手動(dòng)配置開啟熱更新，默認(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對(duì)象添加命令，開啟本地服務(wù)
"server": "webpack-dev-server --open"
如果server有其他命令執(zhí)行，在后面增加這一句命令就可以了
2.4、vue.config.js配置，開啟熱更新
devServer: {
disableHostCheck: true,//webpack4.0 開啟熱更新
}
2.5、最后執(zhí)行npm run server即可，熱更新失效問題解決
不能進(jìn)行熱更新問題
在vue項(xiàng)目中，之前熱更新還是好的，突然發(fā)現(xiàn)在macos上失敗，修改代碼需要npm run dev進(jìn)行重啟才能更新，非常影響開發(fā)效率，但是不是所有的頁面都是這樣。
然后發(fā)現(xiàn)一個(gè)大坑，文件名稱與實(shí)際路徑文件夾名稱大小寫有誤。但是可以運(yùn)行。
解決辦法
檢查文件夾名稱是否正確，確保引入文件夾名稱與路徑的文件夾名稱大小寫保持一致。
經(jīng)過查找，網(wǎng)上還列舉了一些別的可能引起熱更新失效的解決辦法：
1.添加runtimeCompiler:true屬性,指的是包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。
2.執(zhí)行
npm run build – --watch（感覺應(yīng)該是沒有什么用，畢竟這是打包的相關(guān)命令）
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
options是new Vue的參數(shù),我們一般稱之為選項(xiàng)或者構(gòu)造選項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue中options選項(xiàng)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能(操作代碼)
這篇文章主要介紹了Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了淺談 Vue 項(xiàng)目優(yōu)化的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
下面小編就為大家分享一篇vue2.0安裝style/css loader的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue綁定class與行間樣式style的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
分享一個(gè)精簡的vue.js 圖片lazyload插件實(shí)例
本篇文章主要介紹了分享一個(gè)精簡的vue.js 圖片lazyload插件實(shí)例。非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-03-03
這篇文章主要介紹了vue父子組件之間如何通過v-model傳值的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-03-03
詳解vue-template-admin三級(jí)路由無法緩存的解決方案
這篇文章主要介紹了vue-template-admin三級(jí)路由無法緩存的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue配置別名alias在webstorm不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)
這篇文章主要介紹了vuecli項(xiàng)目構(gòu)建SSR服務(wù)端渲染的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10