前端熱部署是指在開發(fā)過程中保留現(xiàn)有狀態(tài)并在保存更改后自動刷新頁面。這使得前端開發(fā)人員能夠更快地開發(fā)和測試代碼，而無需手動刷新瀏覽器。Vue是一種流行的JavaScript框架，具有前端渲染，數(shù)據(jù)綁定和組件系統(tǒng)等功能。Vue提供了內(nèi)置的熱重載能力使您可以快速預(yù)覽UI的調(diào)整。

# 安裝并開啟熱重載
# 只在開發(fā)模式下使用
npm install --save-dev vue-loader@^15.0.0 vue-template-compiler@^2.0.0
#? webpack.config.js
module.exports = {
module: {
rules: [
// ...其他規(guī)則...,
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
}
# 組合使用 HTMLWebpackPlugin 和 webpack-dev-server 來實現(xiàn)熱重載。
npm i --save-dev html-webpack-plugin webpack-dev-server
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/main.js',
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
})
],
devServer: {
contentBase: './dist',
open: true
}
}

在 Vue 文件中，對于一些非視圖相關(guān)的代碼（如計算屬性、組件等）改動也可以即時地生效

在 Vue 2.x 中，默認情況下，我們執(zhí)行的幾乎所有操作都是有副作用的。而這些副作用（很多時候是DOM的修改）可能非常昂貴，例如重排、重繪，甚至由于Trash變化導(dǎo)致內(nèi)存分配是件很耗時的操作

修改問價的預(yù)覽， vue-cli 在其生成的項目中為我們內(nèi)置了熱跟新的功能，讓我們先來看一下如何將內(nèi)置的功能打開：

"devDependencies": {
// ...
"vue-loader": "16.2.0",
"vue-template-compiler": "2.6.14",
"webpack": "4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"dependencies": {
"vue": "2.6.14",
// ...
},
module.exports = {
// ... 
devServer: {
hot: true
}
}

在 Vue 的實例化時，我們會看到一個 options 對象， 它有一個屬性 errorHandler 用來在遇到錯誤時處理它們。

const app = new Vue({
el: "#app",
data: {} 
})
Vue.config.errorHandler = function (err, vm, info) {
console.error(err)
console.error('info: ', info)
console.error('vm: ', vm)
}

使用上面方式可以優(yōu)雅地捕獲 Vue 應(yīng)用中出現(xiàn)（非預(yù)期）的錯誤 有助于開發(fā)者更快速地定位和debug故障

最后，雖然熱更新很方便，但是有時候可能會遇到一些奇怪的問題。如果不能及時解決問題，可以考慮重啟開發(fā)工具或關(guān)閉孤立的進程以解決問題。