新手剛開(kāi)始使用vue時(shí)，常會(huì)遇見(jiàn)一個(gè)坑，那就是熱替換失效。
什么？你跟我說(shuō)使用官方的vue-cli去構(gòu)建，我就是使用vue-cli后突然失效。
什么?你跟我說(shuō)重新npm run dev一下，好嘛，已經(jīng)run了N次了依然沒(méi)回到大路上。
經(jīng)過(guò)在網(wǎng)上一番查找，發(fā)現(xiàn)基本沒(méi)有這個(gè)問(wèn)題的詳解，可能是這個(gè)問(wèn)題太低級(jí)了？
講解一下熱替換的原理：
熱替換是在執(zhí)行npm run dev后，會(huì)啟動(dòng)一個(gè)本地服務(wù)器（webpack-dev-server），這個(gè)服務(wù)器會(huì)觀察源代碼編譯出來(lái)的文件。一旦修改了源代碼，就會(huì)立刻編譯源代碼，然后觀察新編譯后的文件，接下來(lái)替換。
為什么會(huì)有編譯這個(gè)過(guò)程，就是因?yàn)槭褂?vue開(kāi)發(fā)時(shí)，瀏覽器不認(rèn)識(shí)這種類(lèi)型的文件，需要將.vue文件編譯成js文件，再讓瀏覽器去識(shí)別。
所以整個(gè)過(guò)程可以這樣描述：
源代碼 ---> 編譯為目標(biāo)代碼(瀏覽器可以識(shí)別運(yùn)行的代碼) ---> 本地服務(wù)器觀察目標(biāo)代碼 ----> 本地服務(wù)器接收到目標(biāo)代碼改變[事件] ----> 刷新瀏覽器
常見(jiàn)熱替換失效導(dǎo)致的原因:
1. 觀察文件位置錯(cuò)誤
{
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',//必須
assetsPublicPath: '/',
失效是為什么？是因?yàn)樾薷牧嗽创a后，依然會(huì)立刻編譯，但是通常被觀察的新編譯的文件位置錯(cuò)了。也就是說(shuō)瀏覽器顯示的東西與服務(wù)器觀察的東西是一個(gè)位置，而編譯出來(lái)文件是另外的位置。
解決辦法是：config/index.js中 dev的這個(gè)參數(shù)必須為static
2. 項(xiàng)目目錄包含特殊字符
像這樣的路徑 D:\（myworkspace）\vue-answer-project
這種目錄中有一個(gè)括號(hào)?。。【陀锌赡茉跒g覽器中打開(kāi)后，發(fā)現(xiàn)console報(bào)錯(cuò)
http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
這是什么意思呢？就是熱替換模塊報(bào)錯(cuò)，中斷了觀察頁(yè)面與熱替換模塊的鏈接，無(wú)法收到事件。
解決辦法就是：去掉這樣的路徑,讓路徑不包含這些字符
3. npm run build后，打開(kāi)瀏覽器一片空白
這個(gè)位置是根據(jù)文件webpack.config.js中的publicPath進(jìn)行指定的。也就是服務(wù)器觀察位置是 publicPath: "XX/build.js"這里面的 /XX/build.js這個(gè)文件，這個(gè)文件需要你在文件 index.html中 正確引入。
// webpack編譯輸出的發(fā)布路徑
// => 將 build 的路徑前綴修改為 ' ./ '（原本為 ' / '），是因?yàn)榇虬?npm run build)之后，
// 外部引入 js 和 css 文件時(shí)，如果路徑以 ' / ' 開(kāi)頭，在本地是無(wú)法找到對(duì)應(yīng)文件的（服務(wù)器上沒(méi)問(wèn)題）
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to true, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// npm run build --report
// Set to true or false to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
env: require('./dev.env'),
port: 8081,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
cssSourceMap: true
}
解決辦法是：在上圖中的build.assetsPublicPath的值 改為 "./"
