建站
咨詢
售后
建站咨詢
新聞中心
vue中熱替換失效的原因有哪些，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。
1.觀察文件位置錯誤
{
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',//必須
assetsPublicPath: '/',失效是為什么？是因為修改了源代碼后，依然會立刻編譯，但是通常被觀察的新編譯的文件位置錯了。也就是說瀏覽器顯示的東西與服務器觀察的東西是一個位置，而編譯出來文件是另外的位置。
解決辦法是：config/index.js中 dev的這個參數(shù)必須為static
2.項目目錄包含特殊字符
像這樣的路徑 D:\（myworkspace）\vue-answer-project
這種目錄中有一個括號?。?！就有可能在瀏覽器中打開后，發(fā)現(xiàn)console報錯
http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
這是什么意思呢？就是熱替換模塊報錯，中斷了觀察頁面與熱替換模塊的鏈接，無法收到事件。
解決辦法就是：去掉這樣的路徑
3.npm run build后，打開瀏覽器一片空白
這個位置是根據(jù)文件webpack.config.js中的publicPath進行指定的。也就是服務器觀察位置是 publicPath: "XX/build.js"這里面的 /XX/build.js這個文件，這個文件需要你在文件 index.html中 正確引入。
// webpack編譯輸出的發(fā)布路徑 // => 將 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中熱替換失效的原因有哪些的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
當前名稱：vue中熱替換失效的原因有哪些-創(chuàng)新互聯(lián)
URL鏈接：http://www.dlmjj.cn/article/dchpie.html
