【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案

简介: 【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案

一、背景描述

最近项目打包的时候,本地打包没有问题,且能正常运行,但是一旦通过 CI/CD进行自动构建和发布的时候,就会报错Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest,并终止编译和打包

下图是本地电脑打包的时候报的错误信息,但是最终不影响项目构建和打包,可以打包成功。

但是,但是,如果一旦通过 CI/CD进行自动构建和发布的时候,就会报错并结束打包,最后会导致打包失败。

二、解决方案

2.1 解决方案一:重新安装 caniuse-lite、browserslist

在本地电脑上找到项目的node_modules文件夹下面:caniuse-lite、browserslist两个文件夹。并把caniuse-lite、browserslist这两个文件夹删除。

然后运行下面的命令重新安装caniuse-lite、browserslist。

在本地电脑重新打包项目,测试一下,测试好之后,把 package.json 文件提交到svn服务器,这样 jenkins 再次打包的时候就会重新获取依赖的包。

npm i caniuse-lite browserslist -S

可以参考以下示例图片:

执行完重新安装的命令,如果出现下图所示内容即表示重新安装两个文件成功。

重新安装后,项目中的 package.json 文件中会出现两个依赖包,如下图所示:

2.2 解决方案二:npm update caniuse-lite browserslist

这里提示我们需要npm update,需要注意的是,我们不能直接npm update,因为这会让我们所有的依赖包全部update,我们需要带上包名,所以应该这样写命令:

npm update caniuse-lite browserslist

三、拓展

caniuse-lite、browserslist 的介绍,如果想多学习相关的知识,请参考以下介绍。

browserslist:https://www.npmjs.com/package/browserslist

caniuse-lite:https://www.npmjs.com/package/caniuse-lite

本文完结!


相关文章
|
18天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
23天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
12天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
25 2
|
17天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
17天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
22天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
20 7
|
17天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
22天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
25 6
|
17天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。