【报错】Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest Why...

原创已于 2024-08-30 14:51:32 修改 · 1.3w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2024-08-30 11:09:51 首次发布

遇见Bug_Vuejs 专栏收录该内容

48 篇文章

订阅专栏

文章目录

问题

在这里插入图片描述
然后就出现这样的情况

在开发时，不知道动了哪块蛋糕，突然页面变成了这样子，打开控制台后，发现定义的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>