【前端】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,并终止编译和打包

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

browserslist caniuse-lite,Vue,异常解决方案,项目部署,vue.js,前端,javascript
但是,但是,如果一旦通过 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

可以参考以下示例图片:

browserslist caniuse-lite,Vue,异常解决方案,项目部署,vue.js,前端,javascript
执行完重新安装的命令,如果出现下图所示内容即表示重新安装两个文件成功。

browserslist caniuse-lite,Vue,异常解决方案,项目部署,vue.js,前端,javascript
重新安装后,项目中的 package.json 文件中会出现两个依赖包,如下图所示:

browserslist caniuse-lite,Vue,异常解决方案,项目部署,vue.js,前端,javascript

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

本文完结!文章来源地址https://www.toymoban.com/news/detail-656989.html

到了这里,关于【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)

    目录 第一章 前言 第二章 准备工作 2.1 项目打包理解 2.1.1 打包命令 2.1.2 理解npm run serve/dev 和 npm run build命令 2.2 nginx参数配置理解 2.2.1 nginx常用基本命令 2.2.2 默认配置 2.2.3 搭建不同网站的站点 2.2.4 禁止访问的目录以及一键申请SSL证书验证目录相关设置 2.2.5 根据文件类型设置

    2024年02月04日
    浏览(59)
  • 【前端部署】vue项目打包并部署到Linux服务器

    在vs code中打开vue前端项目文件夹,在终端中输入 npm run build ,打包完成后,在前端项目文件夹中会生成一个名为 dist 的文件夹,如下图所示: dist文件夹打开如下所示: 打开服务器终端,在终端中输入以下命令,下载nginx安装包。 其中nginx版本可以自己选择,具体版本可查看

    2024年02月06日
    浏览(68)
  • Gitlab CI/CD 自动化打包部署前端(vue)项目

    一、虚拟机安装 1.vmware下载 2.镜像下载 3.Ubuntu 4.新建虚拟机 一直点下一步,直到点击完成。 5.分配镜像 二、Gitlab CI/CD 自动化部署项目 1.配置GitLab CI/CD: 2.生成SSH密钥对: 如果尚未生成,请在本地机器上生成一个SSH密钥对: 3.将SSH私钥添加到GitLab: 4.更新GitLab CI/CD配置: 5

    2024年03月13日
    浏览(63)
  • Jenkins自动拉取SVN源代码构建打包vue前端项目

    目录 1.功能需求 2.安装插件 2.1 安装NodeJS插件 2.2  安装SVN插件 3.配置环境 3.1  NodeJS环境 4.新建任务配置部署信息 4.1  源代码管理 4.2  构建触发器 4.3  构建环境  4.4  构建步骤 5.构建项目  5.1 点击查看控制台日志 使用Jenkins从SVN上拉取Vue项目进行自动构建打包。如果需要发

    2023年04月22日
    浏览(50)
  • 【微服务部署】四、Jenkins一键打包部署NodeJS(Vue)前端项目步骤详解

      本文介绍使用Jenkins一键将NodeJS(Vue)前端项目打包并上传到生产环境服务器,这里使用的是直接打包静态页面,发送到远程服务器Nginx配置目录的方式,首先确保服务器环境配置好,安装Nginx,运行目录,日志存放目录等。 一、服务器环境配置   Nginx安装也有多种方式

    2024年02月10日
    浏览(44)
  • 关于前端vue打包项目以及静态网站部署项目到阿里云ECS云服务器初学简单教程

    准备工作: 1.首先进入https://ecs.console.aliyun.com/ 领取或者购买一台简单的ECS云服务器。 进入网站注册登录后拉到页面最下面或者顶部搜索免费云服务器领取立即试用 ,当然富哥花钱买一台服务器也行。   创建完了以后可以进入云服务ECS工作台,然后就是以下界面   点击右边

    2024年02月04日
    浏览(73)
  • Vite4 + Vue3 项目打包并发布Nginx服务器 (前端必看)

    这里因为我们有的小伙伴可能不太需要服务器,单纯学习的话也没有必要去买一个服务器。如果需要把自己的东西部署到公网上,有很多方式,自行百度。你也可以购买阿里云或者腾讯云。逻辑都是一样的,我这里使用的虚拟机+centos系统,我已经提前在自己的机器安装好了。

    2024年02月05日
    浏览(90)
  • SpringBoot访问静态资源和jar外部静态资源,部署前端打包后的vue项目放入静态资源里

    记录一下使用SpringBoot访问静态资源和SpringBoot打包之后的jar外部静态资源,在开发的时候,一般选择前后端分离的方式,前端使用vue 后端使用SpringBoot,通常情况下,部署都是前端通过http去请求后端资源,涉及到http请求,那么肯定需要资源的目标地址IP,一般云端部署给到I

    2024年02月09日
    浏览(75)
  • 前端项目打包并部署

    在当前项目路径下,执行命令 在当前项目路径下,生成 一个dist文件夹。  将来部署项目,是部署的dist这个文件。 在终端中执行  唤起vue控制台。   选中项目,点击任务,点击build 1、vue项目打包build 2、新建一个项目(miaoTestProject),将dist目录放到里面。    3、在当前项目路

    2023年04月20日
    浏览(40)
  • 前端项目打包

    前端项目打包指的是将前端项目的源代码打包成一个或多个静态文件,以便于部署到服务器上,供用户访问。下面是一些常用的前端项目打包工具和打包步骤: 1、Webpack:Webpack 是一个强大的打包工具,可以将多个 JavaScript、CSS、图片等文件打包成一个或多个静态文件。 2、

    2024年02月04日
    浏览(20)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包