【前端】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

本文完结!


相关文章
|
4天前
|
前端开发 JavaScript Java
前端限制打包文件数量
前端限制打包文件数量
151 65
|
18天前
|
存储 JavaScript
解锁Vuex高级玩法:模块化与插件共舞,让你的Vue项目状态管理如虎添翼!
【8月更文挑战第27天】Vuex是一款专为Vue.js应用程序设计的状态管理模式及库,它通过集中管理组件状态来确保状态变更的可预测性。在大型应用中,采用模块化管理可以让代码结构更加清晰,同时利用插件增强功能。模块化管理允许将store拆分为包含各自state、mutations、actions和getters的独立模块。插件则能监听状态变化,实现诸如日志记录或数据持久化等功能。本文通过具体示例介绍了如何在Vuex中实现模块化管理和插件的高级应用。
31 1
|
5天前
|
前端开发
vue3+ts项目中使用mockjs
vue3+ts项目中使用mockjs
198 58
|
5天前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
1天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
23 3
|
2天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
8天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
41 11
|
13天前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
43 13
|
7天前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
46 3
|
16天前
|
JavaScript
Vue3相关组件项目依赖依赖版本信息
这篇文章展示了一个Vue 3项目中使用的组件和库的依赖版本信息,包括`ant-design-vue`、`swiper`、`vue`、`vue-router`等,以及开发依赖如`vite`、`vue-tsc`、`eslint`等。
Vue3相关组件项目依赖依赖版本信息