vue配置热更新,vuecli热更新

　　本文主要介绍vue项目的热更新坑及解决方案，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

vue项目热更新坑

　　今天用vue-cli构造vue项目的时候，遇到了一个坑。

　　setInterval(()={

　　console.log(这是一个。)

　　}, 10000)

　　操作后，如下所示：

　　此时，我们在不刷新网页的情况下修改代码：

　　setInterval(()={

　　console.log(这是两个。)

　　}, 1000)

　　结果发现之前的定时功能已经存在很久了，热更新！==刷新页面！纪念

　　突然有一天，vue项目跑了又跑，热更新的时候卡在75%的地方很久。一个热更新用了10多秒，简直耽误了开发进度。我该怎么办？

　　鉴于此，本文分析了热更新慢的原因，步骤如下

　　首先，在包中添加启动命令

　　-进度-观察-颜色-个人资料

　　先解释一下这几个参数的含义

　　Progress施工进度watch实时监控——编制-profile耗时步骤。添加这个配置并重新启动项目，您可以看到

　　图中的红框耗时最多，即在75%的地方卡住的时间最多。肿了怎么办？

　　问度娘，大神们说，这样做。

　　1、安装babel-plugin-dynamic-import-node插件

　　$ npm安装巴别插件动态导入节点

　　2、.babelrc文件里添加配置dynamic-import-node

　　公司脚手架是vue-cli2.0。

　　因此，在。babelrc文件。

　　网上的大神们说，就加吧。我非常兴奋，最后它准备好了。但是，当我再次跑项目的时候，还是一样，还是蜗牛的速度，还是卡在75%。心塞~ ~ ~ ~ ~ ~ ~

　　3、改变路由懒加载方式

　　我找了个大神帮忙，大神说路线太多了。是的，项目越来越多，怎么办？让我尝试使用import来延迟加载路由，因为我使用require来延迟加载路由，如下图所示。

　　在下图中，用导入模式替换要求模式。

　　项目又跑了一遍，1、2秒热更新成功~ ~泪崩。终于好起来了。纠正原因。我猜是安装的插件Babel-plugin-dynamic-import-node，只有配合导入路由加载方式使用，才能发挥应有的作用。搞定了就撒花.

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。