Vue hot reload(即Vue熱重載)是指在Vue開發(fā)過程中,每當(dāng)我們修改了組件或者模板文件時,不需要手動刷新頁面即可在瀏覽器中看到我們所做的修改,并且保持當(dāng)前的應(yīng)用狀態(tài)(如表單填寫等),從而提升開發(fā)效率的一種技術(shù)方法。
實現(xiàn)Vue熱重載的方式很多,其中最為常見的方式是使用webpack-dev-server和webpack-hot-reload-plugin。這兩種技術(shù)通過監(jiān)聽文件變化,然后自動重新編譯和刷新頁面,可以讓開發(fā)者在進行開發(fā)時,實時看到代碼更改后的效果。下面我們就來了解一下如何在Vue項目中配置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, // 啟動服務(wù)時自動打開瀏覽器 }, 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熱重載,你可以愉快地進行Vue項目開發(fā)了!