關于vue-cli3+webpack熱更新失效及解決
vue-cli3+webpack熱更新失效
1.說下起因
A項目中遇到問題，熱更新失效，百思不得其解，查詢搜索vuecli3熱更新失效、vue histroy 模式熱更新失效，網上看到不少方法，npm重新安裝，不要用淘寶鏡像cnpm安裝；npm安裝yarn,再用yarn重新install,yarn serve啟動，在npm run serve 啟動等方法都不好用。
github有類似問題https://github.com/vuejs/vue-cli/issues/1559，有次得到啟發(fā)可能版本不同導致。
對比熱更新正常的項目B的幾個配置文件，重點查看package.json文件，發(fā)現(xiàn)有webpack版本不同。
2.解決方案
初步斷定是webpack版本原因，搜索關鍵詞就變成了webpack4.0熱更新失效，webpack4.0熱更新開啟，由此查詢查詢嘗試。原因大概是webpack4.0需要手動配置開啟熱更新，默認沒有開啟
2.1、局部安裝依賴webpack-dev-server
npm install --save-dev webpack-dev-server
2.2、在webpack.config.js配置相關參數(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對象添加命令，開啟本地服務
"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)一個大坑，文件名稱與實際路徑文件夾名稱大小寫有誤。但是可以運行。
解決辦法
檢查文件夾名稱是否正確，確保引入文件夾名稱與路徑的文件夾名稱大小寫保持一致。
經過查找，網上還列舉了一些別的可能引起熱更新失效的解決辦法：
1.添加runtimeCompiler:true屬性,指的是包含運行時編譯器的 Vue 構建版本。
2.執(zhí)行
npm run build – --watch（感覺應該是沒有什么用，畢竟這是打包的相關命令）
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue3中關于setup與自定義指令，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
vue實現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據)
這篇文章主要介紹了vue實現(xiàn)加載頁面自動觸發(fā)函數(shù)(及異步獲取數(shù)據)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue使用vue-json-viewer展示JSON數(shù)據的詳細步驟
最近在開發(fā)一個公司的投放管理系統(tǒng)的操作日志模塊,要查看某條操作日志的請求參數(shù),要將請求的參數(shù)以JSON格式的形式展示出來,下面這篇文章主要給大家介紹了vue使用vue-json-viewer展示JSON數(shù)據的相關資料,需要的朋友可以參考下2022-09-09
vue后端傳文件流轉化成blob對象,前端點擊下載返回undefined問題
這篇文章主要介紹了vue后端傳文件流轉化成blob對象,前端點擊下載返回undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue中使用定時器(setInterval、setTimeout)的兩種方式
js中定時器有兩種，一個是循環(huán)執(zhí)行?setInterval，另一個是定時執(zhí)行?setTimeout，這篇文章主要介紹了Vue中使用定時器?（setInterval、setTimeout）的兩種方式,需要的朋友可以參考下2023-03-03
vue-router beforeEach跳轉路由驗證用戶登錄狀態(tài)
這篇文章主要介紹了vue-router beforeEach跳轉路由驗證用戶登錄狀態(tài),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue?axios?form-data格式傳輸數(shù)據和文件方式
這篇文章主要介紹了vue?axios?form-data格式傳輸數(shù)據和文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細介紹了Vue.js框架實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
要在 Vue 項目中使用 svg-sprite-loader 來管理 SVG 圖標,需要執(zhí)行相應的步驟,接下來通過本文給大家介紹VUE3 加載自定義SVG文件的詳細步驟,感興趣的朋友一起看看吧2024-01-01
這篇文章介紹了Vue.js中v-show和v-if指令的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03