解决vue-cli项目开发运行时内存暴涨卡死电脑问题

最近开发一个vue项目时遇到电脑卡死问题，突然间系统就非常卡，然后卡着卡着就死机了，鼠标也动不了了，只能冷启动。而且因为是突然卡死，没来得及打开任务管理器。

最开始以为是硬盘的问题，但是在卡死几次后，就想到把任务管理器开着玩项目，看看到底是不是哪个程序把硬盘或者CPU占满了导致的卡死。经过一番排查，发现是node.js进程的内存一直在暴涨，内存直接100%，然后系统将所有休眠进程换到虚拟内存，但是还是不够，就一直换直到崩盘，硬盘也被占满100%。

这时候我才知道是运行项目开发环境导致的。然后想到前段时间更新了项目的依赖（更新前没发生过内存爆的问题），就逐一排查，发现是

这三个依赖的问题。如果强制版本号为3.10.0，如上图中那样，就不会发生问题。如果改为"^3.10.0"，就会发生问题。

记录下遇到的这个问题，分享给大家，也给自己加深一下印象。

SASS预处理器推荐：

因为众所周知的node-sass在windows系统上的一系列(cao)问(dan)题，我推荐大家使用dart-sass（包名为"sass"），完爆node-sass。（也可参考sass-loader官方github的readme）

附上我的项目的整个依赖：

{
"dependencies": {
    "@dclovec/ts-tools": "^1.0.3",
    "@types/echarts": "^4.1.10",
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "echarts": "^4.2.1",
    "element-ui": "^2.11.1",
    "vue": "^2.6.10",
    "vue-amap": "^0.5.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "3.10.0",
    "@vue/cli-plugin-typescript": "3.10.0",
    "@vue/cli-service": "3.10.0",
    "compression-webpack-plugin": "^3.0.0",
    "sass": "^1.22.9",
    "sass-loader": "^7.1.0",
    "terser-webpack-plugin": "^2.1.2",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  }
}

总结

以上所述是小编给大家介绍的解决vue-cli项目开发运行时内存暴涨卡死电脑问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 基于vue-cli搭建多模块且各模块独立打包的项目

    如果我们在开发系统A时,能够按模块划分生成多份静态资源包,最终的成果物中,会有多个子目录,每个子目录可独立运行,完成一个业务功能.这样的话,我们有任何系统需要我们开发过的任何模块,都可以直接打包指定的模块,灵活组装. 优点: 1.可与其他系统灵活组装 2.各个模块相互不受影响,所以不受框架和开发模式的制约 3.不同模块可以分开部署 4.后期维护风险小,可以持续的.稳定的进行维护 缺点: 1.各个模块有相互独立的资源包,那么如果有相同的资源引用,不能复用 2.模块的组装要依赖iframe,所以要对

  • vue-cli3项目展示本地Markdown文件的方法

    [版本] vue-cli3 webpack@4.33.0 [步骤]1.安装插件vue-markdown-loader npm i vue-markdown-loader -D ps:这个插件是基于markdown-it的,不需要单独安装markdown-it. 2.修改vue.config.js配置文件(如果没有,在项目根目录新建一个): module.exports = { chainWebpack: config => { config.module.rule('md') .test(/\.

  • 解决vue-cli项目开发运行时内存暴涨卡死电脑问题

    最近开发一个vue项目时遇到电脑卡死问题,突然间系统就非常卡,然后卡着卡着就死机了,鼠标也动不了了,只能冷启动.而且因为是突然卡死,没来得及打开任务管理器. 最开始以为是硬盘的问题,但是在卡死几次后,就想到把任务管理器开着玩项目,看看到底是不是哪个程序把硬盘或者CPU占满了导致的卡死.经过一番排查,发现是node.js进程的内存一直在暴涨,内存直接100%,然后系统将所有休眠进程换到虚拟内存,但是还是不够,就一直换直到崩盘,硬盘也被占满100%. 这时候我才知道是运行项目开发环境导致的.然后想到

  • 解决vue初始化项目时,一直卡在Project description上的问题

    最近初学vue,但是项目初始化就进行不下去了. 如上图所示,初始化项目时一直卡在项目描述上,直接回车无响应,文字也无法输入. 已定位出原因:vue版本不对!! 解决方法:将2.9.6的版本升级到3.0以上 1.npm uninstall -g vue-cli 卸载掉旧版本: 2.npm install -g @vue/cli 和 npm install -g @vue/cli-init 命令安装新版本vue-cli. 升级后版本: 注意:3.0以上版本的vue-cli的名称已经改为了 @vue/

  • 解决vue初始化项目一直停在downloading template的问题

    解决方法如下: 用power shell初始化vue项目一直停留在downloading template 用git的git bush here 就可以了. 补充知识:vue init webpack 卡在chromedriver上问题解决办法 最近在学习vue,尝试利用vue-cli创建一个工程.但是执行vue init webpack projectname时,执行到Saving to c:\Users\......\chromedriver_win32.zip时卡住不往下走了. 仔细看do

  • 解决PHP里大量数据循环时内存耗尽的方法

    解决PHP里大量数据循环时内存耗尽的方法

    最近在开发一个PHP程序的时候遇到如下一问题: PHP Fatal error: Allowed memory size of 268 435 456 bytes exhausted 错误信息显示允许的最大内存已经耗尽.遇到这样的错误起初让我很诧异,但转眼一想,也不奇怪,因为我正在开发的这个程序是要用一个foreach循环语句在一个有4万条记录的表里全表搜索具有特定特征的数据,也就是说,一次要把4万条数据取出,然后逐条检查每天数据.可想而知,4万条数据全部加载到内存中,内存不爆才怪. 毕竟编程这

  • 解决Vue+Element ui开发中碰到的IE问题

    IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill

  • 解决Vue的项目使用Element ui 走马灯无法实现的问题

    1.在vue项目中引入element ui http://element.eleme.io/#/zh-CN/component/carousel 引入后,HTML部分 <el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h3><img :

  • 解决vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import

  • 解决vue+webpack项目接口跨域出现的问题

    1.config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost) proxyTable: { '/api': { target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境 // target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口 changeOrigin: true, pathRewrite:

  • 解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

    功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup =>onclick,意味着在click事件执行时会与与其相关的mouse事件冲突. 解决方案: 因为click事件执行时间短,所以利用鼠标拖动的时间差作为标志,在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的

  • 解决vue打包项目后刷新404的问题

    vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vu

随机推荐