Vue hot reload（即Vue熱重載）是指在Vue開發(fā)過(guò)程中，每當(dāng)我們修改了組件或者模板文件時(shí)，不需要手動(dòng)刷新頁(yè)面即可在瀏覽器中看到我們所做的修改，并且保持當(dāng)前的應(yīng)用狀態(tài)（如表單填寫等），從而提升開發(fā)效率的一種技術(shù)方法。

實(shí)現(xiàn)Vue熱重載的方式很多，其中最為常見(jiàn)的方式是使用webpack-dev-server和webpack-hot-reload-plugin。這兩種技術(shù)通過(guò)監(jiān)聽文件變化，然后自動(dòng)重新編譯和刷新頁(yè)面，可以讓開發(fā)者在進(jìn)行開發(fā)時(shí)，實(shí)時(shí)看到代碼更改后的效果。下面我們就來(lái)了解一下如何在Vue項(xiàng)目中配置Vue熱重載。

// step 1: 基礎(chǔ)配置
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
...,
devServer: {
hot: true, // 開啟熱重載
open: true, // 啟動(dòng)服務(wù)時(shí)自動(dòng)打開瀏覽器
},
plugins: [
new HtmlWebpackPlugin({
...,
}),
new webpack.HotModuleReplacementPlugin(), // 熱重載插件
]
}
// step 2: 配置vue-loader
module.exports = {
...,
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
hotReload: true, // 配置vue-loader
},
},
],
},
}

現(xiàn)在你已經(jīng)成功地配置了Vue熱重載，你可以愉快地進(jìn)行Vue項(xiàng)目開發(fā)了！