首页 > 其他分享 >Vue .browserslistrc

Vue .browserslistrc

时间:2024-05-01 20:11:38浏览次数:26  
标签:Vue last Firefox versions browserslistrc 版本 使用 浏览器

Vue  .browserslistrc

 

在使用脚手架搭建项目时,会自动生成.browserslistrc文件,该文件只要是 配置兼容浏览器

对于部分配置参数做一些解释:
" >1%" :代表着全球超过1%人使用的浏览器
“last 2 versions” : 表示所有浏览器兼容到最后两个版本
“not ie <=8” :表示IE浏览器版本大于8(实则用npx browserslist 跑出来不包含IE9 )
“safari >=7”:表示safari浏览器版本大于等于7

链接:https://blog.csdn.net/weixin_42418196/article/details/112216046

 

vue-cli browserslist浏览器兼容性

1. 介绍

你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围。这个值会被 @babel/preset-envAutoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

Autoprefixer : PostCSS插件解析CSS并使用Can I Use中的值将供应商前缀添加到CSS规则。它由Google 推荐并在Twitter和阿里巴巴中使用。
Can I Use : 查看CSS样式在不同浏览器下得兼容性。

.browserslistrc 文件

2. 最佳实践

  • 仅仅当你在特定浏览器上开发类似于信息亭之类的 web app 的时候,才可以用类似 last 2 Chrome versions 的查询条件来锁定特别具体的浏览器品牌和版本。市面上有各种各样的浏览器,同时浏览器的版本碎片化也很严重,如果你在开发一款通用的 webapp,那就应该考虑浏览器多样性导致的兼容问题。
  • 如果你想改变,我们建议结合浏览器的默认设置last 1 version,not dead> 0.2%(或 > 1% in US, > 1% in my stats)。last n versions添加了太多死浏览器,并没有添加流行的旧版本。0.2% 从长远来看,选择一个百分比将使流行的浏览器更受欢迎。我们可能会遇到垄断和停滞的情况,就像我们使用Internet Explorer 6.请谨慎使用此设置。
  • 不要仅因为您不了解浏览器而删除浏览器。Opera Mini在非洲拥有1亿用户,在全球市场上比微软边缘更受欢迎。中文QQ浏览器的市场份额比Firefox和桌面Safari更多。

3. 完整清单

您可以通过查询指定浏览器和Node.js版本(不区分大小写):

  • > 5%:全球使用情况统计选择的浏览器版本。 >=<<=工作。
  • > 5% in US:使用美国使用情况统计。它接受两个字母的国家/地区代码
  • > 5% in alt-AS:使用亚洲地区使用情况统计。可在以下位置找到所有地区代码的列表caniuse-lite/data/regions
  • > 5% in my stats:使用自定义使用数据
  • cover 99.5%:提供覆盖的最流行的浏览器。
  • cover 99.5% in US:与上述相同,使用双字母国家代码
  • cover 99.5% in my stats:使用自定义使用数据
  • maintained node versions:所有Node.js版本,仍由 Node.js Foundation 维护
  • node 10node 10.4:选择最新的Node.js 10.x.x10.4.x发布。
  • current node:Browserslist目前使用的Node.js版本。
  • extends browserslist-config-mycompany:从browserslist-config-mycompanynpm包中获取查询 。
  • ie 6-8:选择包含范围的版本。
  • Firefox > 20:Firefox的版本比20更新 >=<并且也可以<=工作。
  • iOS 7:iOS浏览器版本7直接。
  • Firefox ESR:最新的[Firefox ESR]版本。
  • unreleased versionsunreleased Chrome versions:alpha和beta版本。
  • last 2 major versionslast 2 iOS major versions:最近2个主要版本的所有次要/补丁版本。
  • since 2015last 2 years:自2015年以来发布的所有版本(也since 2015-03since 2015-03-10)。
  • dead:来自last 2 version查询的浏览器,但全球使用统计数据少于0.5%,且24个月内没有官方支持或更新。现在是IE 10IE_Mob 10BlackBerry 10BlackBerry 7,和OperaMobile 12.1
  • last 2 versions每个浏览器的最后两个版本。
  • last 2 Chrome versions:Chrome浏览器的最后两个版本。
  • defaults:Browserslist的默认浏览器(> 0.5%, last 2 versions, Firefox ESR, not dead)。
  • not ie <= 8:排除先前查询选择的浏览器。

您可以添加not到任何查询。

4. 调试

  • npx browserslist 在项目目录中运行以查看选择了哪些浏览器。

也可以通过 browserl.ist 网站查看选择了哪些浏览器

 

参考https://www.jianshu.com/p/b3ea906d7d24

标签:Vue,last,Firefox,versions,browserslistrc,版本,使用,浏览器
From: https://www.cnblogs.com/emanlee/p/18006997

相关文章

  • Vue .eslintignore
    Vue .eslintignore项目根目录如果没有 .eslintignore文件,需要手动添加即可 用法如下指定某文件夹包括里面的所有文件都忽略buildsrc/assets指定某文件夹里面的指定文件类型都忽略build/*.js指定某文件夹里面的指定文件忽略src/index.js指定某文件夹里的除......
  • Vue 生命周期
    https://www.bilibili.com/video/BV1ub4y1i78b?p=2 第五章什么是vue3的生命周期https://www.bilibili.com/video/BV1ua4y1u7N8/  Vue生命周期created,mounted        Created和mounted的区别Created:是在组件实例一旦创建完成的时候立即调......
  • Vue main.js
    Vue main.jsmain.js是项目的入口文件,项目中所有的页面都会加载main.jsmain.js配置定义:main.js是项目的入口文件,项目中所有的页面都会加载main.js。主要有三个作用: 1.实例化Vue。 2.放置项目中经常会用到的插件和CSS样式。3.存储全局变量。项目创建完毕,main.js中会有......
  • Vue App.vue
    Vue App.vueVue的App.vue文件是整个Vue项目中最核心的文件之一,它是所有组件的基础组件,也是整个Vue应用的入口文件。我们可以在 App.vue中定义一些全局的样式、组件、路由和状态管理等,从而方便其他组件的调用。App.vue内部包含三个主要部分:模板、逻辑代码和样式。其中......
  • 前端Vue 启动过程 启动流程 执行流程
    前端Vue执行流程Vue的执行流程一般来说,当启动vue程序时,系统会先调用main.js文件 在main.js中,创建了一个新的vue对象并将其挂载到App.vue中id为app的html组件中 在App.js中,引入<router-view/>标签来进行路由管理,系统会进入router文件夹中的index.js文件中来寻找路由i......
  • Vue项目中每个文件夹和文件的用处
     myfirstvue#项目名-node_modules#文件夹,放了该项目所有的依赖,很小很多,以后把项目传给别人,这个要删除,别人拿到执行cnpminstall安装依赖-public#文件夹-favicon.ico#小图标,浏览器上面显示,可以替换-index.htm......
  • Vue项目中main.js、App.vue、import...from...等的作用和意义
      https://www.cnblogs.com/webwangjie/p/11471542.html 一、main.js  1、 main.js程序入口文件,初始化vue实例,并引入使用需要的插件和各种公共组件.importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importLessfrom'Less'......
  • 《Node.js+Vue.js+MangoDB全栈开发实战》已出版
    《Node.js+Vue.js+MangoDB全栈开发实战》随书源码下载地址:链接:https://pan.baidu.com/s/1DQYgPZLmtJCIuDXs8gub_w?pwd=1127提取码:1127课件下载地址:链接:https://pan.baidu.com/s/1M36y1xu-gIUidDxw38GlBg提取码:1988随书目录目   录第1章 Node.js和TypeScript基础·......
  • Vue入门到关门之前端引入
    一、前端发展历史1、什么是前端?前端:针对浏览器的开发,代码在浏览器运行后端:针对服务器的开发,代码在服务器运行2、前后端不分的时代互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。就比如使用HTML(5)、CSS(3)、JavaScript(ES5、ES6)来编写一个个的页面,然后......
  • Vue入门到关门之计算属性与监听属性
    一、计算属性1、什么是计算属性计算属性是基于其它属性计算得出的属性,就像Python中的property,可以把方法/函数伪装成属性,在模板中可以像普通属性一样使用,但它们是基于响应式依赖进行缓存的。这意味着只有在依赖的响应式数据发生改变时,计算属性才会重新计算,否则会直接返回缓存的......