【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案
解决方案
- 一、背景描述
- 二、解决方案
- 2.1 解决方案一:重新安装 caniuse-lite、browserslist
- 2.2 解决方案二:npm update caniuse-lite browserslist
- 三、拓展
一、背景描述
最近项目打包的时候,本地打包没有问题,且能正常运行,但是一旦通过 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
本文完结!
【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案相关推荐
- 前端Vue项目打包性能优化方案
文章目录 一.前言 二.优化方案 1丶路由懒加载(代码分割) 2丶第三方插件按需加载 3丶常用插件库使用CDN加速 4.gzip压缩 5.打包不生成map文件 三.工具推荐 可视化分析包大小 总结 一 ...
- 前端VUE项目打包成安卓APP
1.打包vue项目,在项目的根目录执行命令 npm run build,直至项目打包完成 打开dist文件件,里面有一个index.html和static文件夹. 2.新建cordova项目 2.1安 ...
- 前端vue项目打包部署
使用命令行执行打包命令 npm run build 打包完成后将dist目录使用传输工具传到服务器nginx配置文件内指定目录下 访问服务器ip+配置端口即可访问前端项目 传输工具使用的是winscp ...
- 将vue项目打包部署到云服务器(傻瓜式宝塔面板)
前提准备 拥有一台云服务器(以个人的轻量级云服务器视角) 下载Xshell 先将自己的vue项目打包,得到dist就行 npm run build 通过xhsell连接云服务器 第一步应该是先创建实例 ...
- 记一次vue项目打包优化
目录 前言 一.优化静态资源 二.vue项目打包体积优化 1.路由懒加载 2.抽离第三方js库 3.小结 三.代码优化 1.减少页面的重排和重绘 2.多设置key值 四.服务器优化 1.nginx服务 ...
- 前端开发:Vue项目打包步骤
在前端开发过程中,开发项目编码是必须的能力,但是开发之后的上线也是不可缺少的技能.而且现在的前端开发用的打包都是借助于三方插件来完成的,本篇博文就来分享一下前端项目打包的流程步骤,本案例以Vue来介绍 ...
- vue项目打包与配置-学习笔记
文章目录 vue项目打包与配置-学习笔记 前端打包 打包的代码如何运行 打包指定不同的环境变量(开发,测试) 打包手动配置文件 打包压缩,大文件处理 gzip进一步压缩 打包app 打包部署模式 vu ...
- Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
- Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
最新文章
- java 抽象方法 虚方法的区别_声明抽象类(纯虚方法)会大幅增加二进制大小
- redhat linux系统补丁,如何在CentOS和RHEL系统上安装或自动更新安全补丁
- Spring Boot Vue从零开始搭建系统(三):项目前后端分离
- qsort归纳学习(c语言版本)
- 网站打开速度多少毫秒为正常_诠网科技|网站优化中跳出率多少才是合理的?...
- Spring RSocket:基于服务注册发现的 RSocket 负载均衡
- 多样性算法在58部落的实践和思考
- 土耳其电信与华为签署5G协议谅解备忘录
- Redmi K30S更多细节曝光:骁龙865加持 提供多款配色
- WP7实例篇之土豆搜索器(2)
- OPCServer:使用Matrikon OPC Server Simulation
- 循环队列的创建Java_Java版-数据结构-队列(循环队列)
- ADAS/AD域控制器及芯片平台分析
- Shell日常巡检脚本大全
- 光纤交换机 和 SAN交换机 概念
- 回顾过去,展望未来!
- 【不全】网络工程师术语表
- 关于SDN理解,老杨都放在这里了
- 小米狂秀硬核技术!推多项产业AIoT方案,打造智能生活时代
- 漱口水的性别真的重要吗