vue项目热更新的坑及解决
vue项目热更新坑
今天在使用vue-cli构造的vue项目时，遇到一个坑。
setInterval(() => {
console.log('This is one.')
}, 10000)运行后如下：
这时我们修改其中的代码，不刷新网页：
setInterval(() => {
console.log('This is two.')
}, 1000)结果如下，发现之前的计时函数以久存在，热更新 !== 刷新页面 ！！！谨记
vue项目热更新慢
突然有一天，vue项目跑着跑着，热更新的时候卡到75%的地方卡好久，一个热更新要10几秒，这简直耽误开发进度，不能忍，怎么办呢？
查找热更新慢是哪里慢—分析原因
针对这个分析了一下热更新慢的原因，步骤如下
首先先在package中的启动命令加上
--progress --watch --colors --profile
先解释一下这几个参数的含义
–progress构建进度–watch实时监测–profile编译过程中的步骤耗时时间
加上这个配置，重启项目，就可以看到耗时了
解决办法
图中红色框出来的地方耗时最严重，也就是卡到75%的地方耗时最严重，肿么办呢？
问度娘，大神们说，这样做
1、安装babel-plugin-dynamic-import-node插件
$ npm install babel-plugin-dynamic-import-node
2、.babelrc文件里添加配置dynamic-import-node
公司项目脚手架为vue-cli2.0
所以在.babelrc文件里添加配置dynamic-import-node
网上的大神们说，加上就好了，很兴奋，终于可以好了，然而，我再跑一遍项目，还是一样，还是蜗牛的速度，还是卡在75%。。。。。。心塞~~~~~~~
3、改变路由懒加载方式
求助了个大神，大神说是路由太多了，是呀，项目越来越多了，肿么办，让试一下用import 懒加载路由，因为我现在用的是require懒加载路由的，如下图
把下图中require方式换成import方式
项目再跑一遍，1、2秒就热更新成功~~泪崩，终于好了，纠其原因，我猜的是安装的插件babel-plugin-dynamic-import-node，与import路由加载方式配套使用才能发挥期作用，搞定，撒花·······
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue2.X 通过AJAX动态更新数据的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
本文主要介绍了vue关闭浏览器退出登录，一般都是根据根据beforeunload和unload这两个事件执行的。本文就详细的介绍一下如何实现，感兴趣的可以了解一下2021-12-12
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
制作一个折线图用于显示当前24小时的数据，并且可以通过拖动折现图设置数据，接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），感兴趣的朋友跟随一起学习吧2019-04-04
在一些特殊的应用场景中,可能需要在网页上添加水印以保护版权或标识信息,本文将介绍如何在Vue项目中添加满屏水印并实现去除水印的功能,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue项目中封装axios的方法,axios 是一个轻量的 HTTP客户端，基于 XMLHttpRequest 服务来执行 HTTP 请求，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
vue3中使用vuedraggable实现拖拽el-tree数据分组功能
这篇文章主要介绍了vue3中使用vuedraggable实现拖拽el-tree数据分组功能,可以实现单个拖拽、双击添加、按住ctrl键实现多个添加,或者按住shift键实现范围添加,添加到框中的数据,还能拖拽排序,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了vue 实现搜索的结果页面支持全选与取消全选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
解决element ui select下拉框不回显数据问题的解决
这篇文章主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
el-select单选时选择后输入框的is-focus状态并没有取消问题解决
这篇文章主要给大家介绍了关于el-select单选时选择后输入框的is-focus状态并没有取消问题的解决过程,文中通过图文以及代码示例将解决的办法介绍的非常详细,需要的朋友可以参考下2024-01-01
随着前端大屏页面的逐渐壮大,客户的...其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8,下面这篇文章主要给大家介绍了关于vue播放flv、m3u8视频流(监控)的相关资料,需要的朋友可以参考下2023-04-04
最新评论