babel 解决浏览器兼容性问题

最新推荐文章于 2023-12-23 22:02:18 发布

宝儿的程序生涯

最新推荐文章于 2023-12-23 22:02:18 发布

阅读量3.2k

点赞数 1

分类专栏：常见问题总结

本文链接：https://blog.csdn.net/fengtingYan/article/details/105434420

版权

本文主要探讨在vue-cli3项目中遇到的浏览器兼容性问题，特别是IE和360浏览器。通过查阅babel中文文档和vue-cli3的配置说明，了解到browserslist字段在指定目标浏览器范围上的作用，它影响@babel/preset-env和Autoprefixer的配置。通过更新package.json中的browserslist，项目成功在360浏览器上运行，但IE浏览器仍存在页面样式问题，主要是由于flex布局不被支持。对于IE的兼容性问题，需要进一步检查和适配CSS属性。

摘要由CSDN通过智能技术生成

这里遇到的问题是，本地的vue-cli3项目无法在ie和360浏览器运行

babel中文文档
 vue-cli3下，配置IE浏览器兼容性
在这里插入图片描述
别的不管，这里我就想知道他是如何解决我这个问题，在浏览器显示我要的页面就ok
那么就看他如何配置

vue-cli官网关于浏览器兼容性的介绍

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

// package.json 
"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "not ie <= 11",
    "Android >= 4.0"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

宝儿的程序生涯

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

babel做兼容处理到底怎么使用？

qq_44812835的博客

01-07

2249

日常项目开发中总是避免不了对低版本浏览器做一些兼容处理，最常见的手段就是结合编译工具使用babel来处理一些语法的兼容，但是每次使用的时候其实Babel的配置和使用到的相关库总是云里雾里，网上的各种推荐方案眼花缭乱不知道到底应该怎么选择。

从零开始搭建一个前端框架（六）通过babel实现浏览器兼容支持

Run_youngman的博客

02-14

676

说在前面某些时候，我们不得不考虑浏览器的兼容性，如今主流的浏览器，包括Chrome，Edge，Firefox，Opera，Safari都对ES6有了不同程度的支持，但是前端永远绕不过IE的坎，本节我们就针对IE的兼容性做功课。很遗憾的告诉大家，从Vue3开始，已经放弃了对IE11的支持，如果仍然需要支持IE11或者更低的版本，仍然需要使用Vue2，这里为了说明下通过代码转码实现浏览器的兼容，准备了一个基于webpack 5.x的最小化demo。具体的搭建过程可以参考之前的文章。代码结构 - src -

2 条评论您还未登录，请先登录后发表或查看评论

Babel解决ES6语法无法在浏览器兼容问题

lilong329329的博客

04-07

517

问题1：babel : 无法加载文件 C:\Users\win\AppData\Roaming\npm\babel.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/ go.micros 问题2：get-ExecutionPolicy 获取的结果为：Restricted 解决： 1、用PowerShell,以管理员的身份运行，注意：必须用PowerShell 和管理员身份 2、使用命令：get-ExecutionPolicy 查看获取的结果是否为：Restricted ..

聊聊Babel: 让你的 JavaScript 代码跨浏览器兼容

LuckyWinty的博客

04-23

589

随着前端技术的快速迭代，「前端工程化」使得前端工程师的编程效率得到了大幅度提高。在平常的页面开发中，我们更多的是关注如何使用「ES6」、「ES7」这些新特性来进行更高效的工作，至于这些新特性是如何兼容不同浏览器和平台的，会由「Webpack」等脚手架帮我们处理。然而，只会使用「ES6」、「ES7」这些新特性是远远不够的，知其然并知其所以然，了解「Webpack」是如何将这些新特性语言转换为浏览器兼...

解决JS兼容问题以及初步认识babel（JS工具链的宏观认识）

最新发布

beforeSend的博客

12-23

2102

本文介绍如何摆脱脚手架，通过自行的配置解决js在不同环境下的兼容问题以及对babel有初步认识，对前端工程化有初步认识。

关于angular浏览器兼容性问题的解决方案

10-15

本文将探讨如何解决在Angular应用中遇到的浏览器兼容性问题，主要关注Edge浏览器的特定问题。首先，我们来看Edge浏览器下固定列边框消失的问题。这个问题源自Angular组件ng-zorro-antd中使用了`nzLeft`和`nzRight`...

java浏览器兼容性怎么解决_浏览器兼容性处理方案总结

weixin_39628105的博客

02-19

865

问题：安卓4.4操作系统下webviewH5页面访问空白？原因：该webview浏览器内核版本太低，JavaScript解析器无法解析es5，es6新语法解决步骤：破题利用babel polyfill对不兼容的语法进行处理依赖安装根据官网文档，我们可以看出@babel/polyfill在7.4版本已经过时，实际上拆分成了core-js和regenerator-runtimeAs of Babel ...

详解Vue Cli浏览器兼容性实践

10-15

总结来说，Vue CLI 3 提供了一套完整的解决方案来处理浏览器兼容性问题，通过 browserlist 确定目标浏览器范围，使用 Babel 转译新语法，引入 polyfill 补充不支持的特性，并借助 modern mode 实现高性能和兼容性的...

如何解决浏览器兼容性问题

05-26

解决浏览器兼容性问题的方法有很多，以下是一些常用的方法： 1. 使用现代化的前端框架和库，如React、Angular、Vue等，这些框架和库会自动处理兼容性问题。 2. 使用CSS预处理器或PostCSS，它们可以自动为不同的...

Webpack4+Babel7+ES6兼容IE8的实现

10-17

主要介绍了Webpack4+Babel7+ES6兼容IE8的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

babel+babel-polyfill兼容IE,ES6转ES5

09-03

使用babel，把写好的es6代码，转化为es5，让ie8兼容。

webpack处理javascript兼容性--Babel

weixin_44374938的博客

05-01

656

. package允许你使用Babel和webpack转译JavaScript文件。因为javaScript的版本一直都在更新迭代，所以需要转译为浏览器可认识的文件内容，经常来说，我们会将ES6转换成ES5。一、Babel初使用 1.基本兼容性处理 1.1安装包 npm install babel-loader balel/core babel/preset-env -D 1.1配置文件 { test:/\.js$/, exclude:

babel7.0 兼容ie浏览器

王海虎的博客

06-28

1645

替代 @babel/polyfill // 入口文件出引入 import "core-js/stable"; import "regenerator-runtime/runtime"; // .babelrc 下添加 [ "@babel/env", { "corejs": "3", "useBuiltIns": "entry", "targets": { "chrome": "58", "i

webpack4 + babel7 配置ie兼容

CSDN_lllllxt的博客

09-27

752

有一说一, IE真是让人头大????‍♂️????‍♂️ 以下只给出如何配置, 如果想了解更多请查看文末传送门安装: npm i @babel/polyfill -S npm i @babel/preset-env @babel/plugin-transform-runtime -D // 根据babel.config.json中corejs 2 / 3, 自行选择安装 @babel/runtime-corejs2 或 @babel/runtime-corejs3 npm i @babel/runtim

gulp+babel解决传统项目IE环境ES6语法兼容问题

HELLO WORD

11-28

1151

前言 ES6给我们带来便利的同时，也给我们带来了一下麻烦。当然自从chrome等浏览器对于ES6语法的全面支持以来，这种麻烦也已经降到了最低，如果你的项目完全不需要考虑兼容问题，现在你在项目中可以尽情的使用ES6，且不用做特殊处理。当然这是理想情况。前几年我主要做的都是H5方面的开发，所以对于浏览器的兼容问题关注也不是很多。近两年的开发也都是基于VUE框架，对于vue,如果需要使用ES6并且需要...

为了兼容IE，配置Babel+Webpack

苦作舟的空城机

10-24

3430

前端开发过程中，很可能需要兼容IE浏览器（虽然很无奈就是了），在兼容IE浏览器时要十分小心，因为IE是不支持es2015以上的，所以你可能会发现Promise、箭头函数等方式通通报错。 Webpack 前端项目化的过程中，很多都会使用到Webpack、Gulp等工具。这里我使用的是Webpack，对于Webpack的项目配置因为以前也具体说过，所以这里不再做过多的讲述了。参考链接：简单的前端项目配置 webpack打包typescript webpack5热更新打包TS 一、使用的javascri

兼容IE浏览器

李十三的博客

11-30

639

{ useBuiltIns: 'entry' } 是在 Babel 配置中使用的一种配置选项。transpileDependencies:中配置的是,有些依赖包内使用了es6的语法,会导致ie不兼容,于是再Ie中会报错,我们排查到具体是哪个依赖包后可以将其加入这个配置,就可以解决这个依赖包的问题.让ie支持URLSearchParams,在报错后可以跳转到对应报错的依赖包内,而不是看着打包后的报错代码,找不到到底是哪个包报错了.方便排查是哪个依赖包报错了,再对包进行替换或者转译。