vue2.0兼容ie浏览器(页面加载及导出问题)
最近项目开发中遇到需要用到ie浏览器的情况,因为是内网开发,大致记录下兼容过程。
问题1:ie11浏览器页面无法加载
首先遇到的问题是谷歌浏览器运行无问题,控制台也不报错,但是ie11浏览器就打不开,控制台报错----显示语法错误:,了解后发现ie浏览器不支持es6,可以通过core-js/stable及regenerator-runtime/runtime编译,vue cli官方推荐使用,main.js的第一行引入,前提是package.json安装了core-js
- npm安装core-js/stable及regenerator-runtime/runtime插件
- 在main.js第一行引入
import "core-js/stable";
import "regenerator-runtime/runtime";
查看Vue官网后发现Vue提供了浏览器兼容配置
以下内容为Vue CLI官网Polyfill章节
一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app,它通过 @babel/preset-env
和 browserslist
配置来决定项目需要的 polyfill。
默认情况下,它会把 useBuiltIns: 'usage' 传递给 @babel/preset-env
,这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而,这也意味着如果其中一个依赖需要特殊的 polyfill,默认情况下 Babel 无法将其检测出来。
如果有依赖需要 polyfill,你有几种选择:
如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到
vue.config.js
中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。如果该依赖交付了 ES5 代码并显式地列出了需要的 polyfill: 你可以使用
@vue/babel-preset-app
的 polyfills 选项预包含所需要的 polyfill。注意es.promise
将被默认包含,因为现在的库依赖 Promise 是非常普遍的。// babel.config.js module.exports = {presets: [['@vue/app', {polyfills: ['es.promise','es.symbol']}]] }
提示
我们推荐以这种方式添加 polyfill 而不是在源代码中直接导入它们,因为如果这里列出的 polyfill 在
browserslist
的目标中不需要,则它会被自动排除。如果该依赖交付 ES5 代码,但使用了 ES6+ 特性且没有显式地列出需要的 polyfill (例如 Vuetify):请使用
useBuiltIns: 'entry'
然后在入口文件添加import 'core-js/stable'; import 'regenerator-runtime/runtime';
。这会根据browserslist
目标导入所有 polyfill,这样你就不用再担心依赖的 polyfill 问题了,但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。
以上方法可解决页面无法加载问题。
页面加载出来后又出现了新的问题
问题2:ie浏览器无法导出
增加此行代码即可
if ("msSaveOrOpenBlob" in navigator){
//ie兼容导出window.navigator.msSaveOrOpenBlob(blob,filename);return
}
vue2.0兼容ie浏览器(页面加载及导出问题)相关推荐
- vue2.0 渲染列表在苹果手机加载不出来的问题
一开始对vue的实例化new Vue是在html最后面写的,安卓手机和浏览器都可以加载渲染出来,但是苹果手机不行,最后在'#app'的div标签后边又写了一个script标签,把vue的实例化放在要绑 ...
- 解决2023新版Edge浏览器页面加载不出来、打不开问题
截止2023-03-17,我的这个方法还可以用. 分享一下,不喜勿喷. 不耽误大家时间,直接上方法 第一步:打开设置 第二步:找到下图位置,并按照图修改DNS 第三步:搞定了 声明:我这个是解决这两 ...
- 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 3
备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...
- 认识浏览器:浏览器内核/页面加载/DOM和DOM树
一 前言 在介绍浏览器内核之前,我们先了解以下浏览器的基础知识.浏览器基础是前端知识体系的一个小分支,也是作为一个前端开发人员必须掌握的知识储备,贯穿整个网络体系,项目优化等都是围绕着浏览器进行.除此 ...
- 浏览器的加载顺序与页面性能优化
详情参考:浏览器的加载与页面性能优化 例子: 一:DNS:在header中添加 <link rel="dns-prefetch" href="//HOSTNAME. ...
- [WebKit]浏览器的加载与页面性能优化
非常棒.非常系统的一份资料,值得阅读! 原文来自百度泛用户体验. 作者:nwind 本文将探讨浏览器渲染的loading过程,主要有2个目的: 了解浏览器在loading过程中的实现细节,具体都做了什 ...
- base编码图片导致浏览器卡顿页面加载特别慢怎么办
我们都知道浏览器本身支持直接显示base64编码的图片的 例如 <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYABgAAD ...
- 如何提高页面加载速度 || 前端的性能优化 || 浏览器渲染页面的过程是什么
1.降低请求量 ① 合并资源,减少http请求数量. ② lazyLoad,如图片懒加载.分批加载,每次只加载一部分. ③ 使用字体图标或CSS绘制,来代替部分图片. 2.加快请求速度 ...
- 浏览器的加载与页面性能优化
浏览器的加载与页面性能优化 Javascript 异步加载详解 HTML5 <script>元素async,defer异步加载 defer/async都是异步加载js,和HTML并行加载不 ...
最新文章
- 删除表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断,只留有rowid最小的记录...
- VUE保存页面的数据,VUE页面显示就执行某个函数,VUE页面隐藏就执行某个函数
- 如何在自动驾驶的视觉感知中检测极端情况?
- Linking Containers Together
- Windows XP 源代码泄露,微软终于回应了~
- Debian 9/10快速开启Google BBR的方法,实现TCP高效单边加速
- JetBrains 授权服务器(License Server URLS):
- C语言 if的条件相关
- sbt笔记二 Running
- 父进程给子进程传参数
- 想不想修真鸿蒙接引码,想不想修真接引码介绍_想不想修真接引码是什么_玩游戏网...
- C# 注册dll的两种方式
- A调用B方法,@Transactional事务失效情况
- RK987A键盘蓝牙连接电脑
- java中items是什么意思,Ansible - 如何使用with_items中的寄存器名称
- C/C++牛客网刷题练习之翻转链表篇
- html转pdf文件下载之最合理的方法支持中文
- PCIE设备如何降速降带宽
- COSMOS认证辅导,真正的有机护肤品首先要是天然植物成分,不受转基因和人工化学添加的影响
- arcgis快速生成图框_arcgis制作图框及专题地图制作