vue cli-4.x 利用browserslist兼容ie

最新推荐文章于 2024-06-07 10:38:09 发布
最新推荐文章于 2024-06-07 10:38:09 发布
阅读量2k 收藏 3
点赞数 2
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44423437/article/details/109483756
版权

vue-cli4.x之后不需要手动安装babel/polyfill，vue-cli已经自带了
在这里插入图片描述配置写法

"browserslist": [
    "> 1%",//使用量大于1%
    "last 3 versions",//前三个历史版本
    "not ie <= 8"//不查询 ie8及以下
  ]

调试npx browserslist 在项目目录中运行以查看选择了哪些浏览器。
在这里插入图片描述

配置了browserslist一样做过之后依旧会报错这时候很有可能就是因为你的依赖包并没有被检测出来并进行语法转换，而恰好你的依赖包不支持IE浏览器就像官网所说
在这里插入图片描述在IE浏览器中运行

果不其然，报错
在这里插入图片描述

这个时候不要慌，先点开错误看一下 看最后一行
在这里插入图片描述显式的将这个依赖包放到vue.config.js中的transpileDependencies中去，告诉babel需要转换这个包

狗_都不做前端
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
详解Vue Cli浏览器兼容性实践
11-20
浏览器市场占有率 在处理浏览器兼容性问题之前，我们先来看一下现在的浏览器市场份额是怎样的，:backhand_index_pointing_down:下面是来自statCounter的数据，基本上覆盖了全世界浏览器市场份额的统计，而且前端er经常使用的caniuse所拉取的浏览器数据就是来自statCounter。 世界范围 天朝范围 Plus移动端 分析 从统计数据可以看出，对于国内的PC端浏览器，QQ浏览器以及Sogou的占比还是挺高的，所以在做兼容性处理的时候也需要多考虑这两款浏览器。不过QQ浏览器和Sogou都是封装了Chrome的内核，而它们的更新通常也就是随着Chrome的版本更新而更新，但是这两款浏览器通常不会和Chrome
Vue-CLI 4.x 自动部署项目至服务器
04-01
使用 scp2+cross-env 自动化上传部署 scp2是一个基于ssh2增强实现，纯粹使用JavaScript编写。...这里我们就用这个功能，在Vue编译构建成功之后，将项目推送至测试/生产环境，以方便测试，提高效率。
VUE2兼容ie8以上
weixin_54711921的博客
03-11 652
3 安装完成后会有babel.config.js文件 手动修改下(没有的话手动创建)6 安装core-js 和 regenerator-runtime。4 在package.json文件browserslist配置。写的IE样式不会影响正常的vue样式；它只会在IE下起作用。1.首先安装babel/polyfill。5 在vue.config.js中。7 main.js 引入安装的。2.在main.js里面引入。
前端工程化工具系列（十）—— Browserslist：浏览器兼容性配置工具
最新发布
天下布武
06-07 620
是一个能够在不同的前端工具间共享目标浏览器的配置，各工具根据该配置进行代码转译等操作。具体的这些前端工具为：Autoprefixer、Babel、postcss-preset-env、eslint-plugin-compat、stylelint-no-unsupported-browser-features、postcss-normalize、obsolete-webpack-plugin 等，他们会根据配置自动查找要兼容的所有目标浏览器或 Node.js 版本。
vue cli4 兼容IE浏览器
吕小小布的博客
07-23 7334
Babel是一个JavaScript编译器 Babel是一个工具链，主要用于将ECMAScript 2015+代码转换为当前和旧版浏览器或环境中的向后兼容版本的JavaScript。以下是Babel可以为您做的主要事情： 转换语法 源代码转换（codemods） babel/polyfill Babel包含一个polyfill，它包含一个自定义的再生器运行时和core-js。 这将模拟完...
关于vue/cli4.x vue-cli@4.x版本 浏览器兼容问题处理，兼容ie
热门推荐
csl125的博客
11-24 1万+
在开发项目时由于项目中使用到的监控插件不能兼容高版本的谷歌火狐等，只能使用ie,项目使用vue-cli 4.5.8版本构建 vue-cli4.x默认情况下不需要自己手动安装babel-polyfill，官网对此也有介绍 浏览器兼容性 #browserslist 你会发现有package.json文件里的browserslist字段 (或一个单独的.browserslistrc文件)，指定了项目的目标浏览器的范围。这个值会被@babel/preset-env和Autoprefixer...
兼容IE浏览器
qq_40679463的博客
02-19 507
前端小样式兼容IE 昨天下班之后领导发来一个样式错乱的截图给我，然后我在常用浏览器测了个遍也没发现，然后问领导是哪个浏览器，他说是360浏览器兼容模式下，我打开发现这些兼容是给到IE的，然后我就发了个666。 就是这个确定和取消的按钮到了下面了，如果我直接改肯定是会波及其他浏览器的，只能用js识别IE浏览器，然后通过js改变css样式。 最痛苦的是360浏览器兼容模式下，没法审核元素，我只能下载一个IE来调。 最后我确定了改哪个class，就开始动工了。 代码如下： if (!!window.Activ
vue/cli4.1 antv/g6 兼容IE11
shuai_ang的博客
01-05 924
记录一下vue/cli4.1 antv/g6在兼容IE11时遇到的坑
vuecli-js.rar
05-19
在这里，你可以看到项目所依赖的 `vue`, `vuex`, `vue-router` 和 `axios` 等关键库。 `yarn.lock`（如果是使用 Yarn 包管理器）或 `package-lock.json`（如果是使用 npm）文件，它们记录了所有依赖包的确切版本，...
vue-cli-master.zip
01-10
这个"vue-cli-master.zip"文件包含了使用 Vue CLI 3 创建的一个完整的在线购物商城项目。Vue.js 是一套用于构建用户界面的渐进式框架，以其灵活性、易学性和高效性在前端开发领域广受欢迎。 在该项目中，你将找到...
vue-cli-plugin-component-创建组件的Vue CLI 3插件-Vue.js开发
05-27
vue-cli项目的vue-cli-plugin-component组件插件│README.md│LICENSE（可选）└───src│├──index.js│└───components│vue-cli-plugin-component组件vue-cli项目的插件│README.md│LICENSE（可选）└─...
一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
12-13
百度源代码如下 复制代码代码如下:<!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>; <head> <meta http-equiv=Content-Type content=“text/html;charset=utf-8″> <meta http-equiv=X-UA-Compatible content=IE=EmulateIE7> <title>百度一下，你就知道 </title> [removed]var wpo={start:new Da
vue-cli2.x项目优化之引入本地静态库文件的方法
08-27
vue-cli2.x项目优化之引入本地静态库文件的方法 本文主要介绍了 Vue-cli 2.x 项目优化方法之一，即引入本地静态库文件的方法。该方法可以有效地优化项目的编译速度和文件大小。 首先，需要将 node_modules 下相应...
vue2X,vue-cli 4.X 系列开发项目在ie（11）浏览器的兼容问题
huakaiwuxing的博客
09-07 1116
一、如果项目内引入外部系统的内容，那么需要注意ie浏览器是不兼容标签拼接的形式的； 二、封装的axios请求后台数据时在谷歌，火狐等浏览器均可以顺利获取到数据，在ie浏览器中会报错 主要报错信息如下： SEC7123: Access-Control-Allow-Headers 列表中不存在请求标头 token SCRIPT7002: XMLHttpRequest: 网络错误 0x80070005, 拒绝访问。 之所以会出现这样的错误，是因为http中标准的head，认证名字叫做Authoriz
vue-cli4如何兼容Ie11浏览器
weixin_43644615的博客
11-30 2324
首先需要依赖es6-promise和babel-polyfill npm install es6-promise --save-dev npm install babel-polyfill --save-dev 然后需要在main.js的最上面引入 import promise from 'es6-promise' import 'babel-polyfill' promise.polyfill() // 兼容 Promise 其次需要在vue.config.js里面的configureWebp.
vue项目兼容老IE
W-Mo-Mo的博客
02-07 341
为满足客户需求，对vue项目做兼容IE处理，使用的IE浏览器版本为11.0.9600.19625。在 main.js 中的最前面引入 babel-polyfill。安装babel-polyfill依赖，解决es6语法的兼容问题。在babel.config.js中。
vue-cli4项目在ie浏览器出现白屏
weixin_43885974的博客
01-10 277
vue-cli4项目在ie浏览器出现白屏
vue-cli 4.3 + iview 兼容IE9
JaneHLee的博客
05-08 441
vue-cli 4.3 + iview 兼容IE9 安装bable依赖 npm install babel-polyfill --save vue.config.js 中配置 IE9 不兼容flex 写法，这里引入的iview 中很多样式都是flex 写的 给flex-direction：row 中的子元素添加float:left，当高版本浏览器识别flex时，就会自动忽略 float 样式 I...
Cannot find vue-cli-service.js
09-10
"Cannot find vue-cli-service.js"是一个常见的错误，它表示在运行项目时找不到vue-cli-service.js文件。这通常是因为项目的依赖关系或配置有问题。 有几个可能的解决方法可以尝试： 1. 确保你已经正确安装了Node.js和vue-cli。你可以在终端命令中运行`node -v`和`vue --version`来验证它们的安装。如果没有安装，你可以去官方网站下载并按照说明进行安装。 2. 确保你在正确的项目目录下运行命令。如果你在错误的目录下运行命令，就会找不到vue-cli-service.js文件。确保你在项目根目录下运行`npm run serve`命令。 3. 检查项目的依赖关系是否正确安装。你可以在终端命令中运行`npm install`来安装项目的依赖关系。如果已经安装了依赖关系，可以尝试删除`node_modules`文件夹，并重新运行`npm install`来重新安装依赖关系。 4. 如果上述方法都没有解决问题，你可以尝试修改项目中的配置文件。根据引用中提到的终极方案，你可以尝试打开`node_modules`文件夹下的`.bin`文件夹，并找到`vue-cli-service.cmd`文件进行修改。 总之，"Cannot find vue-cli-service.js"错误通常是由于项目依赖关系或配置问题引起的。你可以尝试验证安装，检查项目目录和依赖关系，并按照需要修改配置文件来解决这个问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狗_都不做前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值