【报错】Browserslist: caniuse-lite is outdated. Please run: npx update
问题https://i-blog.csdnimg.cn/direct/f1b031dd821b466c9ebabe80b1ed8632.png
然后就出现这样的情况
在开发时，不知道动了哪块蛋糕，突然页面变成了这样子，打开控制台 后，发现定义的px都被转换成了 rem，而且比力小，因此出现了这样的情况
https://i-blog.csdnimg.cn/direct/761330f27e354b2c9c17d14a9aef602b.png
分析
caniuse lite已过期
[*] Browserslist 资助我们在浏览器兼容性和包巨细之间保持适当的平衡。 使用 Browserslist，可以做到覆盖更广泛的受众（浏览器），同时包的体积也会保持最小化。
[*] 为什么要定期更新 caniuse-lite
浏览器兼容性：caniuse-lite 是 Browserslist 的一个数据源，用于提供差别浏览器和浏览器版本的支持数据。定期更新可以确保你的工具能够识别和支持最新的浏览器特性。
[*] 修复问题：更新数据库可以修复旧数据中的潜在问题和漏洞，确保你的项目在全部目标浏览器中能够正常工作。
[*] 使用新特性：新版本的 caniuse-lite 数据库包罗最新的浏览器信息和功能支持，更新可以让你使用新浏览器特性和改进。
解决
[*]按照提示信息进行 修复升级版本
https://i-blog.csdnimg.cn/direct/e7f616dfabb849028645c8768f294666.png
但是启动后还是会报错，因此在网上搜集了很多方法，比如：
[*]先删了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>
后续有时间了看看是动了哪块蛋糕导致页面突然出现这样的情况
https://i-blog.csdnimg.cn/direct/dd749c542f41470e875a2b12d2e7db44.png
补充【20240830】
由于使用上述办法都未曾成功，因此又做了一些功课，总结如下：
1.启动项目报错： npm run dev
https://i-blog.csdnimg.cn/direct/b998f3788cd74165887b45a2f16ef1b5.png
2. 根据提示进行版本升级：npx update-browserslist-db@latest
https://i-blog.csdnimg.cn/direct/70b5404572594c948b6999d105bf7434.png
3. pnpm 又对该依赖进行了升级：pnpm up caniuse-lite
因为我的项目中是使用 pnpm 进行作为依赖安装的工具
https://i-blog.csdnimg.cn/direct/7bb3293a47644607bf39463cfae93b41.png
4. 升级之后依赖更新：pnpm install
https://i-blog.csdnimg.cn/direct/0b6ecee8152e4a3184da6cf3b2a7dce2.png
5. 又重新进行了项目启动
https://i-blog.csdnimg.cn/direct/271ac725624e4b269dad3baa499b4b0b.png
至此，问题解决
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]