如何愉快的用上 vue-hot-reload 功能

[碎碎酱]

vue 的 hot-realod 功能是由 vue-hot-reload-api 实现的
vue-loader 集成了它, 可以通过参数 options.hotReload = true 来启用

但是有些情况下, 页面不会正确的 hot-reload, 下面记录各个问题的解决办法

问题一: TypeError: Cannot read property 'extend' of undefined

该问题是由于渲染顶层组件的方式不正确

错误的挂载方式

window.app = new Vue(Index).$mount('#app');

正确的挂载方式

window.app = new Vue({
    render: h => h(Index),
}).$mount('#app');

参考: vuejs/vue-hot-reload-api#61

问题二: [Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"

该问题是由于挂载 vue-router 的方式不正确

错误的挂载方式

const router = new Router();
Index.router = router;
window.app = new Vue({
    render: h => h(Index),
}).$mount('#app');

正确的挂载方式

const router = new Router();
window.app = new Vue({
    render: h => h(Index),
    router,
}).$mount('#app');