Browserslist: caniuse-lite is outdated
2025-03-03
765 字约 3 分钟
...问题
然后就出现这样的情况
在开发时，不知道动了哪块蛋糕，突然页面变成了这样子，打开控制台 后，发现定义的px都被转换成了 rem，而且比较小，因此出现了这样的情况
分析
caniuse lite已过时
-
Browserslist 帮助我们在浏览器兼容性和包大小之间保持适当的平衡。 使用 Browserslist，可以做到覆盖更广泛的受众（浏览器），同时包的体积也会保持最小化。
-
为什么要定期更新 caniuse-lite
浏览器兼容性：caniuse-lite 是 Browserslist 的一个数据源，用于提供不同浏览器和浏览器版本的支持数据。定期更新可以确保你的工具能够识别和支持最新的浏览器特性。 -
修复问题：更新数据库可以修复旧数据中的潜在问题和漏洞，确保你的项目在所有目标浏览器中能够正常工作。
-
利用新特性：新版本的 caniuse-lite 数据库包含最新的浏览器信息和功能支持，更新可以让你利用新浏览器特性和改进。
解决
-
按照提示信息进行 修复升级版本
但是启动后还是会报错，因此在网上搜集了很多方法，比如：
- 先删了
node_modules/caniuse-lite和node_modules/browserslist两个文件夹 - 然后运行下面的命令：
npm i --save-dev caniuse-lite browserslist - 再执行：
npm update
不知道该方法有没有用，反正我用了之后没有什么效果，之后有时间了再研究研究怎么做或者大家有什么好的建议或者有效方案的话欢迎大家评论踩一下我
最后的解决是这样解决的：
在index.html文件中
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<style>
html{
font-size: 2rem;
}
</style>
</body>后续有时间了看看是动了哪块蛋糕导致页面突然出现这样的情况
补充【20240830】
由于使用上述办法都不曾成功，因此又做了一些功课，总结如下：
1.启动项目报错： npm run dev
2. 根据提示进行版本升级：npx update-browserslist-db@latest
3. pnpm 又对该依赖进行了升级：pnpm up caniuse-lite
因为我的项目中是使用 pnpm 进行作为依赖安装的工具
4. 升级之后依赖更新：pnpm install
5. 又重新进行了项目启动
至此，问题解决
如果您觉得这篇文章有帮助，请点个赞吧～
相关文章
更多文章 →前端2026-07-17
HTML Form 可以把 POST 响应加载进 iframe
在接入支付验证、身份认证或第三方授权页面时，我们经常会遇到这样的流程： 1. 后端返回一个第三方接口地址。 2. 这个地址必须通过 请求访问。 3. 接口返回 HTML，或者重定向到真正的验证页面。 4. 验证页面需要嵌入当前网站，而不是打开新标签页。 5. 验证完成后，当前页面继续执行后续业务。 第一次遇到这个需求，很容易想到： 但涉及第三方支付时，这种方式通常会遇到 CORS、Cookie、重定向和跨域页面读取限制。 实际上，HTM...
学习
前端2026-05-29
前端判断一个网页是否允许被 iframe 内嵌
前端 不能 100% 准确提前判断 一个网页是否允许被 iframe 内嵌，因为决定权主要在目标网站返回的 HTTP 响应头 里，而普通前端 JS 通常读不到跨域页面的响应头。 核心判断看这两个东西： 1. 老一点但仍常见。 表示完全不允许被 iframe 嵌入。 表示只允许同源页面 iframe 嵌入。 以前有这个，但现代浏览器支持很差，基本不建议依赖。 2. 现在更推荐看这个。 表示不允许任何页面嵌入。 表示只允许同源嵌入。 表示只...
学习
前端2026-03-20
网页唤起 Android App 调试笔记（App Links）
在最近的项目中，我遇到了 网页访问特定 URL 应该唤起 Android App，但实际只打开网页 的问题。通过调试和排查，整理出以下经验和步骤。 1\. 项目与环境信息（脱敏处理） 网站域名： 唤起页面： Android App 包名： intent filter 配置示例： assetlinks.json 已上线，包含 App 的 SHA256 签名指纹 2\. 问题现象 用户访问 页面时， 网页打开了，但 App 没...
学习
前端2026-03-02
深入理解 Cookie：安全属性、访问边界与渲染场景实践
本文系统梳理 Cookie 核心机制，聚焦 HttpOnly/SameSite 等安全属性 、 访问权限边界 、 CSR/SSR 差异 ，附关键代码示例与安全清单。适合开发查阅与知识沉淀。 一、Cookie 是什么？为什么需要它？ HTTP 是无状态协议。Cookie 是服务端通过 响应头下发、浏览器自动存储并在后续 同源请求中携带 的小型文本数据（通常 ≤4KB），用于： 会话维持（Session ID） 用户偏好（语言/主题） 跨请...
学习
前端2026-03-02
退出登录时 Cookie 清除指南
核心结论 ：登出 ≠ 单方面操作。HttpOnly 与非 HttpOnly Cookie 需 前后端协同清除 ，缺一不可。残留 Cookie = 安全隐患 + 用户体验漏洞。 🔒 为什么不能“一键清空”？ 浏览器出于安全设计： 后端 ：只能通过 响应头清除 自己设置过 的 Cookie（需属性完全匹配） 前端 JS ：可读写非 HttpOnly Cookie，但 无法触碰 HttpOnly Cookie 无“清除全部”API ：任何服...
学习
前端2025-12-15
懒加载图片在同一个 Item 中逐个出现的原因与解决方案
懒加载图片在同一个 Item 中逐个出现的原因与解决方案 适用场景 ：使用原生 实现图片懒加载的动态列表，每个列表项（item）包含多张图片。 📌 问题描述 在开发一个动态渲染的列表时，每个 item 中包含三张图片，并使用 HTML 原生的懒加载属性： 观察到的现象： 开启懒加载时 ：三张图片 不是同时出现 ，而是 从左到右（或从上到下）依次加载显示 ，有明显的时间差。 关闭懒加载（移除 ）后 ：三张图片 看起来是一起出现的 ，视觉...
学习
评论
请登录后发表评论
去登录