Vue3使用了Vite和UnoCSS导致前端项目启动报错:Error:EMFILE:too many open files

一个 Vue3 的项目,用的是 Vite 打包,通过 npm run dev 运行时,遇到了以下错误(尤其是引入了 Element-Plus 后):

Error: EMFILE: too many open files,后面是具体的文件路径。。甚至到了 node_modules 深层目录,地狱~~

看到这个错误,立马就联想到了在 Linux 上遇到的类似问题,一般是通过 ulimit -n 新的文件句柄数 来修改默认配置,不过我是在 Windows 上开发,刚好用的是 Bash Shell ,就尝试查看和修改了下(同时,在网上搜索这个错误,得到的结果都是这种方法);然而,并没有解决问题。

2023-12-16-ulimit.jpg

在说明解决方法前,小了解下题中涉及的三个角色,后面进行问题排查时会用到。

  • Vue3
    Vue3 是一种流行的 JavaScript 框架,用于构建用户界面。它具有以下优点:

  • 性能优化:Vue3引入了一些性能优化,如虚拟DOM重构和响应式系统的改进,使得应用程序更加高效。

  • TypeScript支持:Vue3对TypeScript的支持更加完善,使得代码更加可靠和易于维护。

  • Composition API:Vue3引入了Composition API,使得代码组织更加灵活和可复用。

  • 更好的Tree-shaking:Vue3通过模块化的设计和静态分析,实现了更好的Tree-shaking,减小了应用程序的体积。

  • 更好的错误处理:Vue3提供了更好的错误处理机制,使得开发者能够更容易地调试和定位问题。

  • Vite
    Vite 是一个基于ESM(ES Module)的构建工具,专为现代浏览器和开发者设计。它的优点包括快速的冷启动、即时的热模块替换、按需编译等,使得开发体验更加流畅和高效。 Vite 还支持 TypeScriptJSXCSS 等,并且可以轻松地集成 VueReact 等框架。

  • Unocss
    UnoCSS 是一种即时的原子 CSS 引擎,旨在具有灵活性和可扩展性。其核心设计是不持有特定观点,所有的 CSS 实用工具都是通过预设提供的。

优点包括:

  • 自动化:无需手动标记未使用的样式,unocss 可以自动分析项目并删除未使用的样式。
  • 减小文件大小:通过删除未使用的样式,可以减小 CSS 文件的大小,从而加快加载速度。
  • 提高性能:减小文件大小可以提高页面加载速度和性能。
  • 灵活性:可以与各种前端框架和工具集成,适用于各种项目。

原因排查

那么,可能无法通过修改操作系统的文件句柄数来解决,可究竟是什么原因导致的呢?

  • Vue3.x,这个我们前端用的比较多,一般问题都能处理,显然这次的问题就比较特殊,暂时忽略;
  • Vite,构建工具,类似以前用的Webpack,需要重点排查一下;
  • UnoCSS,对团队成员来说,是一项相对较新的技术,在体验新技术的先进性的同时,也需要踩一些坑,这个UnoCSS同样需要排查;

根据经验,大部分问题都是配置的问题,刚好,在项目的根目录下有两个配置文件:

  • vite.config.js
  • uno.config.js

光是看这两个配置文件,或者在网上漫无目的地搜索,对于新手来说确实也发现不了问题;这时另一个思路涌现了,这些技术栈一般都是开源软件,那么可以到其官方的代码仓库 Issues 中搜索下,看有没有小伙伴遇到类似的错误,而且官方也是第一手的资料;这一看可了不得:https://github.com/vitejs/vite/issues?q=+too+many+open+files,在 ViteGitHub 仓库 Issues 中直接找到了同款问题。。

原因分析

UnoCSS 的配置文件 uno.config.js 中,将文件系统属性被映射到项目根目录 / 而不是源码目录 ./src/ ,这导致 UnoCSS 将会扫描整个 node_modules ,这显然太大了。因此,将文件系统路径 **/ 更改为 ./src/ 就解决了问题。

解决方法

2023-12-16-unocss.jpg

  content: {
      filesystem: ["**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}"],
  },

改成了

  content: {
    filesystem: ["./src/*.{html,js,ts,jsx,tsx,vue,svelte,astro}"],
  },

小总结

问题不重要,解决问题的思路才重要,这里仅提供解决问题的一个思路。查看官方GitHub仓库的 Issues 有以下好处:

  • 从官方可以获取到第一手的资料;
  • 可以了解其他用户遇到的问题和bug,以及它们的解决方案;
  • 可以提出自己遇到的问题或建议,与开发者和其他用户进行交流和讨论;
  • 可以跟踪项目的进展和开发者对问题的处理情况;
  • 可以为开源项目做出贡献,比如提交bug报告、提出改进建议或者参与讨论。

Reference

  • https://github.com/vitejs/vite/issues/13912

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/251158.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于 Gin 的 HTTP 代理上网行为记录 demo

前言: 前端时间写了好几篇使用 Gin 框架来做 HTTP 代理 demo 的文章,然后就想着做一个记录上网行为的小工具,就是简单记录看看平时访问了什么网站(基于隧道代理的,不是中间人代理,所以只能记录去了哪里,不能…

vue3:直接修改reative的值,页面却不响应,这是什么情况?

目录 前言: 错误示范: reactive() 的局限性 解决办法: 1.使用ref 2.reative多套一层 3.使用Object.assign 前言: 今天看到有人在提问,问题是这样的,我修改了reative的值,数据居然失去了响…

详细了解stm32---按键

提示:永远支持知识文档免费开源,喜欢的朋友们,点个关注吧!蟹蟹! 目录 一、了解按键 二、stm32f103按键分析 三、按键应用 一、了解按键 同学们,又见面了o(* ̄▽ ̄*)ブ,最…

【Java代码审计】XSS篇

【Java代码审计】XSS篇 1.Java中XSS常见触发位置2.反射型XSS3.存储型XSS4.XSS漏洞修复 1.Java中XSS常见触发位置 XSS漏洞产生后必然会有相关的输入/输出,因此我们只需快速找到这些输入/输出点,即可快速地进行跟踪发现漏洞。输入在Java中通常使用“reque…

ES6 面试题 | 02.精选 ES6 面试题

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

C++试卷(华南理工大学)

华南理工大学期末考试 《高级语言程序设计(I)》A卷 注意事项: 1. 考前请将密封线内各项信息填写清楚; 2. 所有答案写在答题纸上,答在其它地方无效; 3.考试形式:闭卷&#xff1b…

LT7911D是TYPE-C/DP或者EDP转2 PORT MIPI和LVDS加音频

1.概述: T7911D是一款高性能TYPE-C/DP/EDP转2 PORT MIPI或者LVDS的芯片,目前主要在AR/VR或者显示器上应用的很多,对于DP1.2输入,LT7911D可配置为1/2/4车道。自适应均衡化使其适用于长电缆应用,最大带宽可达21.6Gbps。…

AI智能配音助手微信小程序前后端源码支持多种声音场景选择

大家好今天给大家带来一款配音小程序 ,这款小程序支持多种不同声音和场景的选择更人性化, 比如说支持各地区的方言,英文,童声呀等等、 另外也支持男声女声的选择,反正就是模板那些非常的多 当然啦音量,语调,语速那些都是可以DIY跳转的哟,所以说这一款小程…

【单元测试】Junit 4--junit4 内置Rule

1.0 Rules ​ Rules允许非常灵活地添加或重新定义一个测试类中每个测试方法的行为。测试人员可以重复使用或扩展下面提供的Rules之一,或编写自己的Rules。 1.1 TestName ​ TestName Rule使当前的测试名称在测试方法中可用。用于在测试执行过程中获取测试方法名称…

​SQL (关系型) 数据库-fastapi集成

SQL (关系型) 数据库 - FastAPI FastAPI不需要你使用SQL(关系型)数据库。 但是您可以使用任何您想要的关系型数据库。 在这里,让我们看一个使用着SQLAlchemy的示例。 您可以很容易地将SQLAlchemy支持任何数据库,像: PostgreSQLMySQLSQLi…

云原生之深入解析Linkerd Service Mesh的功能和使用

一、简介 Linkerd 是 Kubernetes 的一个完全开源的服务网格实现,它通过为你提供运行时调试、可观测性、可靠性和安全性,使运行服务更轻松、更安全,所有这些都不需要对代码进行任何更改。Linkerd 通过在每个服务实例旁边安装一组超轻、透明的…

Python常见面试知识总结(一):迭代器、拷贝、线程及底层结构

前言: Hello大家好,我是Dream。 今天来总结一下Python和C语言中常见的面试知识,欢迎大家一起前来探讨学习~ 【一】Python中迭代器的概念? 可迭代对象是迭代器、生成器和装饰器的基础。简单来说,可以使用for来循环遍历…

时序预测 | Python实现CNN电力需求预测

时序预测 | Python实现CNN电力需求预测 目录 时序预测 | Python实现CNN电力需求预测预测效果基本描述程序设计参考资料预测效果 基本描述 该数据集因其每小时的用电量数据以及 TSO 对消耗和定价的相应预测而值得注意,从而可以将预期预测与当前最先进的行业预测进行比较。使用该…

前端框架的虚拟DOM(Virtual DOM)

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

《PySpark大数据分析实战》-11.Spark on YARN模式安装Hadoop

📋 博主简介 💖 作者简介:大家好,我是wux_labs。😜 热衷于各种主流技术,热爱数据科学、机器学习、云计算、人工智能。 通过了TiDB数据库专员(PCTA)、TiDB数据库专家(PCTP…

Vue学习计划-Vue2--VueCLi(七)nextTick、、浏览器本地缓存、脚手架配置代理

1. nextTick 语法: this.$nextTick(回调函数)作用:在下一次DOM更新结束后执行其指定的回调什么时候用: 当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行 **举个栗子:…

B+树与索引

作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO 联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 对于60%的程序员而言&a…

【 某景点舆情分析:Python、Echarts、Flask、文本处理技术的应用】

某景点舆情分析:Python、Echarts、Flask、文本处理技术的应用 前言技术栈数据获取与准备景点数据统计分析评论数据处理与分析词频统计分词与文本处理情感分析 数据可视化Web应用搭建结语 前言 随着旅游行业的蓬勃发展,越来越多的人通过网络平台获取关于…

SQL 入门指南:从零开始学习 SQL

当今时代,数据已经成为了我们生活中不可或缺的一部分。无论是企业的经营决策,还是个人的日常消费习惯,都需要通过对数据的收集、分析和应用来实现更好的结果。 而关系型数据库系统,作为最常见的数据存储和管理方式,SQ…

HNU-数据库系统-实验1-数据定义/数据操纵

数据库系统 课程实验1数据定义/数据操纵 计科210X 甘晴void 202108010XXX 目录 文章目录 数据库系统 课程实验1<br>数据定义/数据操纵实验目的实验样例实验环境实验内容1.1 数据库定义1&#xff09;实验内容与要求2&#xff09;实验重难点3&#xff09;实验基础知识①模…