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.mzph.cn/news/226984.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5G工业物联网网关,比4G工业网关强在哪里?

​随着5G技术的广泛应用,越来越多的行业开始探索如何利用5G网络提升效率和创新能力。其中,工业物联网领域是受益最大的领域之一。作为连接物联网设备和网络的关键组件,5G工业物联网网关在这个变革中发挥着至关重要的作用。本文将深入探讨5G工…

指针进阶篇

指针的基本概念: 指针是一个变量,对应内存中唯一的一个地址指针在32位平台下的大小是4字节,在64位平台下是8字节指针是有类型的,指针类型决定该指针的步长,即走一步是多长指针运算:指针-指针表示的是两个指…

赛氪为第五届全球校园人工智能算法精英大赛决赛选手保驾护航

12月10日,以“智青春算未来”为主题的2023年第五届全球校园人工智能算法精英大赛全国总决赛在河海大学江宁校区举行。本次大赛由江苏省人工智能学会主办,自9月份启动以来,共吸引了全国近400所高校的3000多支参赛团队参加。经过校赛、省赛选拔…

nlp与cv的发展

Transformer的出现,促进了更高容量模型的建立,为大模型的出现奠定基础. 🧐大模型通常具有十亿个以上参数(仅供参考) 😮左边的蓝色是CV领域、右下绿色是NLP、右上蓝色是多模态😃基础模型(Foundational Models)首次由Bommasani等人在《Stanford…

HTTP代理服务器脚本录制

1、报错1 target controller is configured to “use recording Controller“ but no such controller exists,ensure_target controller is configured to "use recording -CSDN博客

等等Domino 14.0FP1

大家好,才是真的好。 节奏确实太快了,有时候我深感我也追不上。 以前Notes Domino是三年磨一剑,也就说每三年才发一个大版本,从2019年开始,进行了高频提速,居然一年一个大版本! 周末&#xf…

NAT——网络地址转换

目录 一、概念 二、NAT的分类 1.静态NAT 1.1 静态NAT的配置 1.2 利用eNSP小实验加强对静态NAT的理解 2、动态NAT 三、NAPT——端口映射 四、Easy IP 使用一个公网地址可以让所有人都上公网 一、概念 随着Internet的发展和网络应用的增多,IPv4地址枯竭已经成为…

jmeter 如何循环使用接口返回的多值?

有同学在用jmeter做接口测试的时候,经常会遇到这样一种情况: 就是一个接口请求返回了多个值,然后下一个接口想循环使用前一个接口的返回值。 这种要怎么做呢? 有一定基础的人,可能第一反应就是先提取前一个接口返回…

在Node.js中MongoDB排序的方法

本文主要介绍在Node.js中MongoDB排序的方法。 目录 Node.js中MongoDB排序使用原生的mongodb驱动程序进行排序使用Mongoose库中的排序 Node.js中MongoDB排序 在Node.js中使用MongoDB进行排序,可以使用原生的mongodb驱动程序或者Mongoose库。 使用原生的mongodb驱动…

改进lora-scripts,支持SDXL训练,以及启动脚本

分享下自己改进的一个lora训练脚本,在ubuntu下如果SD-WEBUI的环境已经搭好的话,只需要下载lora-script就可以支持训练了,直接命令行方式训练。 首先,我们需要克隆下项目: git clone https://github.com/Akegarasu/lo…

黑色翻页时钟HTML源码-倒计时单页翻页时钟

黑色翻页时钟HTML源码-倒计时单页翻页时钟这是一个类似fliqlo的黑色翻页时钟HTML源码,它仅包含一个HTML文件,上传到网站后即可使用。该时钟具有查看当前时间、秒表和倒计时功能,并且可以在页面的右下角进行设置。 红色动态炫酷数字时钟html网…

【已解决】在使用poi-tl生成的word文档时候,怎么添加目录?poi-tl生成目录解决办法

需求: 需求的报告模板中大概包括标题、目录、前言、章节(根据模板动态生成的标题文字表格图片),其中目录需要根据章节的实际情况动态生成。在网上没有找到什么好的解决方案,请教一下实现思路,非常感谢。 …

MATLAB 计算两片点云间的最小距离(2种方法) (39)

MATLAB 计算两片点云间的最小距离 (39) 一、算法介绍二、算法实现1.常规计算方法2.基于KD树的快速计算一、算法介绍 假设我们现在有两片点云 1 和 2 ,需要计算二者之间的最小距离,这里提供两种计算方法,分别是常规计算和基于KD树近邻搜索的快速计算方法,使用的测试数据如…

为什么选择国产WordPress:HelpLook的优势解析

如今网站建设可以说已经是企业必备。而在众多的网站建设工具中,WordPress无疑是其中的佼佼者。作为一款开源的CMS(内容管理系统),WordPress拥有丰富的插件和主题,以及强大的功能,使得用户可以轻松地构建出符…

vivado约束方法8

无交互的逻辑互斥时钟组 逻辑排他性时钟是指在不同源点上定义但共享部分的时钟由于多路复用器或其他组合逻辑,它们的时钟树。时间限制向导识别此类时钟,并建议在它们这样做时直接对其进行时钟组约束除了连接到其共享时钟的逻辑之外,彼此之间…

半导体:Gem/Secs基本协议库的开发(5)

此篇是1-4 《半导体》的会和处啦,我们有了协议库,也有了通讯库,这不得快乐的玩一把~ 一、先创建一个从站,也就是我们的Equipment端 QT - guiCONFIG c11 console CONFIG - app_bundle CONFIG no_debug_release # 不会生…

Python 直观理解基尼系数

基尼系数最开始就是衡量人群财富收入是否均衡,大家收入平平,那就是很平均,如果大家收入不平等,那基尼系数就很高。 还是给老干部们讲的言简意赅。 什么是基尼系数 我们接下来直接直观地看吧,程序说话 # -*- coding:…

Chart.js 实现实时动态折线图 并限制最大长度

<!DOCTYPE html> <html><head><title>模拟</title><script src"https://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script><script src"https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"…

12345、ABCDE项目符号列表文字视频怎么制作?重点内容介绍PR标题模板项目工程文件

Premiere模板&#xff0c;包含10个要点标题12345、ABCDE项目符号列表文字模板PR项目工程文件。可以根据自己的需要定制颜色。在视频的开头、中间和结尾使用。包括视频教程。 适用软件&#xff1a;Premiere Pro 2019 | 分辨率&#xff1a;19201080 (HD) | 文件大小&#xff1a;9…

基于Java SSM框架实现疫情居家办公OA系统项目【项目源码+论文说明】

基于java的SSM框架实现疫情居家办公OA系统演示 摘要 21世纪的今天&#xff0c;随着社会的不断发展与进步&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0c;由原来的感性认识向理性认识提高&#xff0c;管理工作的重要性已逐渐被人们所认识…