最近项目开发中遇到需要用到ie浏览器的情况,因为是内网开发,大致记录下兼容过程。

问题1:ie11浏览器页面无法加载

首先遇到的问题是谷歌浏览器运行无问题,控制台也不报错,但是ie11浏览器就打不开,控制台报错----显示语法错误:,了解后发现ie浏览器不支持es6,可以通过core-js/stable及regenerator-runtime/runtime编译,vue cli官方推荐使用,main.js的第一行引入,前提是package.json安装了core-js

  1. npm安装core-js/stable及regenerator-runtime/runtime插件
  2. 在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,你有几种选择:

  1. 如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。

  2. 如果该依赖交付了 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 的目标中不需要,则它会被自动排除。

  3. 如果该依赖交付 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浏览器(页面加载及导出问题)相关推荐

  1. vue2.0 渲染列表在苹果手机加载不出来的问题

    一开始对vue的实例化new Vue是在html最后面写的,安卓手机和浏览器都可以加载渲染出来,但是苹果手机不行,最后在'#app'的div标签后边又写了一个script标签,把vue的实例化放在要绑 ...

  2. 解决2023新版Edge浏览器页面加载不出来、打不开问题

    截止2023-03-17,我的这个方法还可以用. 分享一下,不喜勿喷. 不耽误大家时间,直接上方法 第一步:打开设置  第二步:找到下图位置,并按照图修改DNS 第三步:搞定了 声明:我这个是解决这两 ...

  3. 深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 3

    备注: 因为文章太长,所以将它分为三部分,本文是第三部分. 第一部分:深入浅出经典面试题:从浏览器中输入URL到页面加载发生了什么 - Part 1 第二部分:深入浅出经典面试题:从浏览器中输入URL ...

  4. 认识浏览器:浏览器内核/页面加载/DOM和DOM树

    一 前言 在介绍浏览器内核之前,我们先了解以下浏览器的基础知识.浏览器基础是前端知识体系的一个小分支,也是作为一个前端开发人员必须掌握的知识储备,贯穿整个网络体系,项目优化等都是围绕着浏览器进行.除此 ...

  5. 浏览器的加载顺序与页面性能优化

    详情参考:浏览器的加载与页面性能优化 例子: 一:DNS:在header中添加 <link rel="dns-prefetch" href="//HOSTNAME. ...

  6. [WebKit]浏览器的加载与页面性能优化

    非常棒.非常系统的一份资料,值得阅读! 原文来自百度泛用户体验. 作者:nwind 本文将探讨浏览器渲染的loading过程,主要有2个目的: 了解浏览器在loading过程中的实现细节,具体都做了什 ...

  7. base编码图片导致浏览器卡顿页面加载特别慢怎么办

    我们都知道浏览器本身支持直接显示base64编码的图片的 例如 <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEAYABgAAD ...

  8. 如何提高页面加载速度 || 前端的性能优化 || 浏览器渲染页面的过程是什么

    1.降低请求量 ​ ① 合并资源,减少http请求数量. ​② lazyLoad,如图片懒加载.分批加载,每次只加载一部分. ​ ③ 使用字体图标或CSS绘制,来代替部分图片. 2.加快请求速度 ​ ...

  9. 浏览器的加载与页面性能优化

    浏览器的加载与页面性能优化 Javascript 异步加载详解 HTML5 <script>元素async,defer异步加载 defer/async都是异步加载js,和HTML并行加载不 ...

最新文章

  1. 删除表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断,只留有rowid最小的记录...
  2. VUE保存页面的数据,VUE页面显示就执行某个函数,VUE页面隐藏就执行某个函数
  3. 如何在自动驾驶的视觉感知中检测极端情况?
  4. Linking Containers Together
  5. Windows XP 源代码泄露,微软终于回应了~
  6. Debian 9/10快速开启Google BBR的方法,实现TCP高效单边加速
  7. JetBrains 授权服务器(License Server URLS):
  8. C语言 if的条件相关
  9. sbt笔记二 Running
  10. 父进程给子进程传参数
  11. 想不想修真鸿蒙接引码,想不想修真接引码介绍_想不想修真接引码是什么_玩游戏网...
  12. C# 注册dll的两种方式
  13. A调用B方法,@Transactional事务失效情况
  14. RK987A键盘蓝牙连接电脑
  15. java中items是什么意思,Ansible - 如何使用with_items中的寄存器名称
  16. C/C++牛客网刷题练习之翻转链表篇
  17. html转pdf文件下载之最合理的方法支持中文
  18. PCIE设备如何降速降带宽
  19. COSMOS认证辅导,真正的有机护肤品首先要是天然植物成分,不受转基因和人工化学添加的影响
  20. arcgis快速生成图框_arcgis制作图框及专题地图制作

热门文章

  1. vol.131 日本异闻录 · 我曾经去了一个假的日本
  2. Python学习笔记(五)EasyGui
  3. sso实现php,php的sso单点登录实现方法,phpsso单点登录_PHP教程
  4. 第二周JAVA课后总结
  5. java8 多行字符串_Java8字符串分割的几种方式及性能比较
  6. BPR实施中常用的五大手法
  7. 秋招面试 前端问题总结
  8. 2020年11月信息系统项目管理师真题(综合+案例)
  9. 电脑传图片到手机adb命令
  10. 留存分析从入门到进阶