亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

關(guān)于vue-cli3+webpack熱更新失效及解決

 更新時(shí)間：2022年04月22日 11:24:59   作者：西洲 -  
這篇文章主要介紹了關(guān)于vue-cli3+webpack熱更新失效及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)文章

最新評(píng)論