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

news/2024/11/20 21:34:19/

一个 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.ppmy.cn/news/1271463.html

相关文章

指针相关知识(进阶)

前面的入门中已经介绍了指针的基础知识,接下来,让我们继续学习吧! 一. 字符指针变量 char* 一般形式 int main() {char n w;char* pa &n;*pa w;return 0; } 这并不是把字符串hello world放在n中,而是把第一个字符的地址…

关于论坛中 Edge 问题解决教程汇总

常见问题 使用 Microsoft Edge 浏览器时,可能会遇到一些具体的问题,以下是一些常见问题及可能的解决方法: 1. 页面加载缓慢: 解决方法: 检查网络连接:确保网络连接稳定。清除浏览器缓存:打开…

Axure元件库的使用

1.基本元件库 1.1Axure的画布范围 Axure是一个绘制项目原型图的软件,它里面的基本原件有: 1.1元件的呈现范围 首先我们要了解基本元件的作用范围在哪里? 浏览效果: 可以看出当我们的基本元件放在画布区域内是可以完全呈现出来…

【Spring教程29】Spring框架实战:从零开始学习SpringMVC 之 服务器响应知识全面详解

目录 1 环境准备2 响应页面3 返回文本数据4 响应JSON数据5 知识点总结 欢迎大家回到《Java教程之Spring30天快速入门》,本教程所有示例均基于Maven实现,如果您对Maven还很陌生,请移步本人的博文《如何在windows11下安装Maven并配置以及 IDEA配…

当指定了一个 messageid 后,发送或插入消息,即使成功,也查询不到此消息

SDK messageid 仅在发送失败时,可以使用 SDK 已经构建好的 id,不支持自己指定一个自定义的 id 值。 如果传入一个 SDK 不存在的 id 会导致消息丢失 如果传入一个 SDK 存在的但不是当前消息的 id,会导致原有消息内容发生变更,导致消…

现代雷达车载应用——第2章 汽车雷达系统原理 2.2节 汽车雷达架构

经典著作,值得一读,英文原版下载链接【免费】ModernRadarforAutomotiveApplications资源-CSDN文库。 2.2 汽车雷达架构 从顶层来看,基本的汽车雷达由发射器,接收器和天线组成。图2.2给出了一种简化的单通道连续波雷达结构[2]。这…

从零开始:前端架构师的基础建设和架构设计之路

文章目录 一、引言二、前端架构师的职责三、基础建设四、架构设计思想五、总结《前端架构师:基础建设与架构设计思想》编辑推荐内容简介作者简介目录获取方式 一、引言 在现代软件开发中,前端开发已经成为了一个不可或缺的部分。随着互联网的普及和移动…

宣布全面推出适用于 macOS 的 Amazon EC2 M2 Pro Mac 实例

即日起,Amazon Elastic Compute Cloud (Amazon EC2) M2 Pro Mac 实例现已全面推出 (GA)。在为 Apple 平台(例如 iOS、macOS、iPadOS、tvOS、watchOS、visionOS 和 Safari)构建和测试应用程序时,这些实例的性能比现有的 M1 Mac 实例…