Vue HotOnly是Vue.js的一個調試模式,用于在開發者進行Vue.js組件開發時,實現熱替換的效果。
通常情況下,在進行Vue.js組件開發時,如果需要查看修改后的效果,需要手動刷新頁面。但是使用Vue HotOnly后,頁面不必刷新即可自動更新組件,并在控制臺打印出提示信息。
在使用Vue HotOnly之前,需要確保Vue.js的版本在v2.5.0以上,并安裝了vue-loader和vue-hot-reload-api。
npm install --save-dev vue-loader vue-hot-reload-api
接下來,需要在webpack配置文件中進行相關配置,將Vue HotOnly中間件加入webpack的hot中間件中。
const webpack = require('webpack');
const hotMiddlewareScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true';
module.exports = {
entry: ["./src/app.js", hotMiddlewareScript]
//...
plugins: [
new webpack.HotModuleReplacementPlugin()
]}
配置完成后,使用以下代碼啟動服務即可。
var webpackConfig = require('./webpack.config.js');
webpackConfig.entry.app.unshift("webpack-hot-middleware/client");
var compiler = webpack(webpackConfig);
app.use(webpackHotMiddleware(compiler));
除此之外,Vue HotOnly還可以與Vue.js的Devtools同時使用,方便進行組件開發時的調試和查看。
上一篇c 讀取json配置