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工…

惰性加载函数(js的问题)

在web开发中,因为浏览器之间的实现差异,一些嗅探工作总是不可避免。 var addEvent function( elem, type, handler ){if ( window.addEventListener ){return elem.addEventListener( type, handler, false );}if ( window.attachEvent ){return elem.…

指针进阶篇

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

Pandas实践_变形

文章目录 一、长宽表的变形1.pivot2.pivot_table3.melt4.wide_to_long 二、索引的变形1.stack与unstack2.聚合与变形的关系 三、其他变形函数1.crosstab2.explode3.get_dummies 一、长宽表的变形 什么是长表?什么是宽表?这个概念是对于某一个特征而言的…

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

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

nlp与cv的发展

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

Spring boot 配置参数

# ---------------------------------------- 2 # CORE PROPERTIES 3 # ---------------------------------------- 4 5 # SPRING 相关配置 (ConfigFileApplicationListener) 6 spring.config.name # config file name (default to application) 7 spring.config.location # lo…

服务总线SpringCloudBus

1 简介 为了使用户微服务能够及时感知到Git仓库中配置文件的修改,可以使用SpringCloud Bus来实现配置的自动更新。 SpringCloud Bus底层是基于RabbitMQ实现的,默认使用本地的消息队列服务。它是用轻量级的消息代理将分布式的系统连接起来,用…

和为K的子数组(LeetCode 560)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路方法一:枚举方法二:前缀和 哈希表优化 参考文献 1.问题描述 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列…

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驱动…

K8s中Service Account和RBAC

一.Service Account详解 1.什么是Service Account? ①.ServiceAccount(服务账户)是Kubernetes集群中的一种资源对象,用于为Pod或其他资源提供身份验证和授权,以便它们能够与Kubernetes API进行交互。 ②.ServiceAcc…

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

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

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

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

八股文打卡day1——计算机网络(1)

面试题:从输入 URL 到页面展示到底发生了什么? 我的回答: 1.首先在浏览器缓存中寻找该页面资源。如果找到了,就返回页面资源。如果没找到,就进行网络请求。 2.在进行网络请求前,先进行DNS的解析&#xff…

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

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

PHP的垃圾回收机制是怎样的?

PHP 使用自动垃圾回收机制来管理内存。PHP 的垃圾回收主要依赖于引用计数和周期性垃圾回收两种策略。 引用计数: PHP 使用引用计数来跟踪变量的引用次数。每当一个变量被引用,其引用计数就增加;每当一个引用被释放,计数就减少。当…