新手剛開始使用vue時，常會遇見一個坑，那就是熱替換失效。
什么？你跟我說使用官方的vue-cli去構建，我就是使用vue-cli后突然失效。
什么？你跟我說重新npm run dev一下，好嘛，已經run了N次了依然沒回到大路上。
經過在網上一番查找，發現基本沒有這個問題的詳解，可能是這個問題太低級了？
講解一下熱替換的原理：熱替換是在執行npm run dev后，會啟動一個本地服務器（webpack-dev-server），這個服務器會觀察源代碼編譯出來的文件。一旦修改了源代碼，就會立刻編譯源代碼，然后觀察新編譯后的文件，接下來替換。
為什么會有編譯這個以過程，就是因為使用.vue開發時，瀏覽器不認識這種類型的文件，需要編譯成js文件。
所以整個過程可以這樣描述：
源代碼 ---> 編譯為目標代碼(瀏覽器可以識別運行的代碼) ---> 本地服務器觀察目標代碼 ----> 本地服務器接收到目標代碼改變[事件] ----> 刷新瀏覽器
常見熱替換失效導致的原因：
1.觀察文件位置錯誤
{
env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static',//必須 assetsPublicPath: '/',失效是為什么？是因為修改了源代碼后，依然會立刻編譯，但是通常被觀察的新編譯的文件位置錯了。也就是說瀏覽器顯示的東西與服務器觀察的東西是一個位置，而編譯出來文件是另外的位置。
解決辦法是：config/index.js中 dev的這個參數必須為static
2.項目目錄包含特殊字符
像這樣的路徑 D:/（myworkspace）/vue-answer-project
這種目錄中有一個括號！！！就有可能在瀏覽器中打開后，發現console報錯
http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
這是什么意思呢？就是熱替換模塊報錯，中斷了觀察頁面與熱替換模塊的鏈接，無法收到事件。
解決辦法就是：去掉這樣的路徑
3.npm run build后，打開瀏覽器一片空白
這個位置是根據文件webpack.config.js中的publicPath進行指定的。也就是服務器觀察位置是 publicPath: "XX/build.js"這里面的 /XX/build.js這個文件，這個文件需要你在文件 index.html中 正確引入。
// webpack編譯輸出的發布路徑// => 將 build 的路徑前綴修改為 ' ./ '（原本為 ' / '），是因為打包(npm run build)之后，// 外部引入 js 和 css 文件時，如果路徑以 ' / ' 開頭，在本地是無法找到對應文件的（服務器上沒問題）
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的值 改為 "./"
以上這篇解決vue熱替換失效的根本原因就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
