当前位置: 首页 > news >正文

vuecil3+版本下,兼容ie等不支持es6的低版本浏览器

vue cil官网在开发时,其实介绍了浏览器兼容性的解决方法:浏览器兼容性,已经可以解决大部分问题,如何配置:

一、 配置browserslist
项目中在package.json同级有个.browserslist文件,没有可自行添加。
.browserslist

> 1%
last 2 versions
not dead
not ie <= 8

这个文件是用来指定项目的目标浏览器,换句话说就是写一些条件来告诉转译工具,只给满足条件的浏览器需要兼容,其他的浏览器就不管了!满足条件的浏览器越少当然编译的包代码越少。

解释一下上述几个条件的含义:

1% 市面上大于1%使用率的浏览器
last 2 versions 最新两个版本的浏览器
not dead 没有废弃的浏览器
not ie <= 8 ie8以下不管,vue本身就不兼容

二、 配置babel.config.js
官方告知:一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app,它通过 @babel/preset-env和 browserslist 配置来决定项目需要的 polyfill。

2.1 vue内置转译工具的作用

1.Vue CLI 项目会使用@vue/babel-preset-app,内置转译插件,不需要单独下载,在网上很常见的@vue/app就是它的简写,基于@babel/env;

2.browserslist前面已经说过了,是指定目标浏览器的条件。

3.@babel/preset-env是整个Babel大家族最重要的一个preset。不夸张地说,在vue环境中的所有配置项仅需要它自己就可以完成现代JS工程所需要的所有转码要求。这里就知道他是babel的一个预设配置插件,用于Babel对ES6语法的转码,在vuecil项目已经内置,不需要单独下载,@babel/env就是它的简写。
作用:默认只转换新的JavaScript语法(syntax),而不转换新的 API。

4.polyfill可以认为也是一个工具。作用:用来转译es6语法转译之外缺失的API工具
API

http://www.dtcms.com/a/276325.html

相关文章:

  • 内容总监的效率革命:用Premiere Pro AI,实现视频画幅“一键重构”
  • 四、深度学习——CNN
  • 快速上手UniApp(适用于有Vue3基础的)
  • 服务器ssh连接防护指南
  • 软件测试基础1-软件测试需求分析
  • Python技巧记录
  • 详细理解向量叉积
  • CVPR2025 Mamba系列
  • 内容总结I
  • 我的LeetCode刷题笔记——树(2)
  • 带货视频评论洞察 Baseline 学习笔记 (Datawhale Al夏令营)
  • [动态规划]1900. 最佳运动员的比拼回合
  • Matplotlib 模块入门
  • 非欧几里得空间图卷积算子设计:突破几何限制的图神经网络新范式
  • Linux系统中部署Redis详解
  • python作业2
  • 【时间之外】AI在农机配件设计场景的应用
  • 【详解ProTable源码】高级筛选栏如何实现一行五列
  • Elasticsearch 的 `modules` 目录
  • AMD 锐龙 AI MAX+ 395 处理器与端侧 AI 部署的行业实践
  • 【华为OD】MVP争夺战2(C++、Java、Python)
  • 拼多多电商运营技巧---价格体系设置
  • 数据的计算与格式化
  • [Python] Flask 多线程绘图时报错“main thread is not in main loop”的解决方案
  • SuperClaude命令参考手册:AI编程革命中的20个核心指令详解
  • JavaEE多线程——锁策略 CAS synchronized优化
  • UI前端大数据可视化新探索:如何利用色彩心理学提升数据传达效果?
  • [vroom] 启发式算法(路径评估) | 局部搜索优化引擎 | 解决方案输出解析
  • 单向链表反转 如何实现
  • 蓝牙BT UUID的含义以及使用方法案例说明