VueCli3+vue2.6兼容ie11

2023-10-31

一、首先确定babel-polyfill版本号,babel-polyfill 7.4.0以前使用babel/polyfill,之后使用core-js/stable 和 regenerator-runtime。可参考官方文档babel-polyfill官方文档

二、此处使用core-js+regenerator-runtime

1、首先打开【package.json】确定是否下载core-jsregenerator-runtime依赖,未下载使用yarn add core-jsyarn add regenerator-runtime命令进行下载,下载完成如下

2、 在【main.js】中引入,core-js版本不同,引入方法不同

(1)core-js3.*以后版本

import 'core-js/stable';

import 'regenerator-runtime/runtime';

(2)core-js3.*以前版本

import 'core-js';

 

 3、打开【babel.config.js】进行配置

presets: [

[

      '@vue/app',

      {

        useBuiltIns: 'entry',

      },

    ],

  ],

 4、打开【package.json】配置browserslist或者【.browserslistrc】文件进行配置

> 1%
last 2 versions
not ie <= 8

5、 在【index.html】中引入proxy.min.js

(1)下载到本地引入

<script src = "<%= BASE_URL %>proxy.min.js"></script>

(2)直接引入proxy.min.js

<script src = "https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>

6、 配置【vue.config.js】,这一步比较重要,之前很多次都是在这里出错,因为IE不支持ES6,所以需要将ES6转译成ES5。但是node_modules中的依赖不会进行转译,所以需要手动配置。

(1)因为排查使用了ES6语法需要转译的依赖有点麻烦,所以,先全部转译,看下IE下能否出来效果。在【vue.config.js】中添加下面语句,然后重新编译,等待时间会稍微比较长。

 transpileDependencies: [/node_modules[/\\\\](.*)[/\\\\]/,],

(2)此时打开ie11浏览器应该是可以正常展示了,但是还需要优化,定位到具体的依赖,缩短编译时间。我们可以将这一行配置注释掉,然后根据ie报错进行修改依赖。

1)首先我们将IE设置为调试模式,然后F12进行调试,可以看到报了chunk-vendors.js语法错误,但是无法准确定位到是哪个依赖的错误,所以下面采用比较笨的方法

2) 我们将【package.json】中dependencies中的依赖都添加到transpileDependencies中,然后执行npm ls -g -depth=0将获取到的一级依赖也都添加到transpileDependencies中,再在最前方添加dom7,再重新编译一下。

transpileDependencies: [/node_modules[/\\\\](dom7|@vue|rimraf|webpack|webpack-cli|ant-design-vue|axios|babel-loader|babel-plugin-import|core-js|echarts|jquery|js-base64|less|less-loader|moment|qs|regenerator-runtime|sortablejs|swiper|uuid|video.js|vue|vue-amap|vue-awesome-swiper|vue-i18n|vue-jsonp|vue-router|vue-seamless-scroll|vue-video-player|vuedraggable|vuex|)[/\\\\]/,]

3)此时打开IE应该可以正常显示了,但是需要转译的还是太多,所以我们进行逐步删除排查,最终排查出来结果入下:

  transpileDependencies: [/node_modules[/\\\\](dom7|js-base64|swiper|vue-i18n|)[/\\\\]/,],

ps:其实可以根据报错定位到哪些引入包需要转译,但是由于ie性能问题,经常看不到提示,所以采用了这个笨方法,正常提示如下:可以看到是swiper需要进行转译

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VueCli3+vue2.6兼容ie11 的相关文章

随机推荐

  • github学习记录目录

    说明 很久没有更新过CSDN了 一方面是因为图片上传和排版过于麻烦 另一方面是因为没有另一方面 懒狗一只 其实是放在GitHub了 CSDN里的东西也不想搬过去 权当重新开始学习啦 平时的学习记录均会不定时的上传到GitHub上 希望走过路
  • 【数据集】——SBD数据集下载链接

    简介 SBD Dataset 是一个语义边界数据集 其包含来自 PASCAL VOC 2011 数据集中 11355 张图片的注释 这些图片均基于 Amazon Mechanical Turk 其中分割之间的冲突均为手动解决 此外 每张图像
  • hadoop之hello world

    初学hadoop 这是第一个例子wordCount import java io IOException import java util StringTokenizer import org apach hadoop conf impor
  • 2022十三届蓝桥杯省赛赛时代码

    1478 14 应该就是取模问题 include
  • 刻章不要钱 5个在线印章制作工具

    俺的博客里的图片 还有网生代上俺写的文章很多都是用印章当作图片水印的 奇怪的是 怎么没人眼馋 有了现代科技 刻章其实很简单了 本文就介绍几个在线印章制作工具 一 MakePic印章生成器 允许输入2 4个汉字 可选择的字体有 经典繁印篆 经
  • 算法导论 学习笔记 第三章 函数的增长

    当输入规模足够大 要研究算法的渐近效率 即我们关心当输入规模无限增加时 在极限中 算法的运行时间如何随着输入规模的变大而增加 主要使用以下渐近记号描述算法的运行时间 1 记号 给定一个函数g n 用 g n 表示以下函数的集合 若存在正常量
  • python之路-untitest单元测试框架组件使用详细介绍

    文章目录 unittest xmind思维导图 UnitTest介绍 TestCase TestSuite TextTestRunner TestLoader TestSuite和TestLoader的使用区别 小结 Fixture 方法级
  • 北京政府占股扶持机构

    1 北京中关村发展集团股份有限公司 2 北京中海投资管理有限公司 http www zhtzgl cn 3 北京首都科技集团有限责任公司 4 亦庄国际 http www etowncapital com zjtz columnsId 40
  • Linux线程知识总结

    1 编程头文件
  • react-实现页面跳转

    Link a标签 需设置path属性 值为路径 点击后会跳转到指定的路径 Router 用来包裹整个组件 Route 指定对应路径所展示的组件 Route写在哪里组件就展示在哪里 路由会给组件提供history属性 在this props里
  • Transformers训练预处理datasets出现Socket Timeout

    原因 ddp的时候默认等待时间是1800s 如果超出这个时间程序就会退出 解决方法 更新transformers库 低版本不支持如下方式 并添加参数 ddp timeout 3600 这里3600s只是demo 具体根据自身程序来设置
  • 手把手前端入门笔记之vue-element-admin-01

    前言 本文主要为vue element admin框架的入门教程 本人2年后端开发经验 想自学前端转全栈工程师 听着就好酷 直接上手实战应该是入门前端最快的方式了 在此记录下学习过程 希望可以对初学者有所帮助 如有错误或未考虑完全的地方 望
  • 以太坊使用puppeth工具

    puppeth源于官方的项目编译后 https github com ethereum go ethereum即可得到要得到的内容 只想用工具 不想自己编译 博主编译了一份所有的工具都有 下载 https download csdn net
  • LeetCode题目笔记——面试题 01.03. URL化

    文章目录 题目描述 题目难度 简单 方法一 替换空格 代码 Python 方法二 构造新字符串 代码 Python C 方法三 将 20插入到原字符串中 总结 题目描述 URL化 编写一种方法 将字符串中的空格全部替换为 20 假定该字符串
  • Weblogic 12c 集群环境搭建

    本文是在windows7操作系统下配置的 jdk版本1 7 weblogic版本12 1 3 0 0 搭建集群前的规划 其中AdminServer是总控制端 server1 server2 server3是集群中的三个服务节点 其中Admi
  • vue2 new Date() 转换为年月日时分秒以及星期几(padStart补零) - 附完整示例

    new Date 效果 2022年07月12日 星期二 17 19 29 一 new Date 在vue2中使用new Date 转换为年月日时分秒以及星期几 padStart补零 二 使用步骤 1 data中声明定时器以及在methods
  • Sketch装机必备!10款Sketch 插件使用率超高!

    本文给大家推荐和整理了 10款 使用率超高的 Sketch 插件 Sketch 是一款深受 UI 设计师欢迎的 UI 设计工具 由于其轻便的格式 简洁的 UI 界面操作 很快风靡 UI 设计行业 其 Sketch 的插件尤为强大 可谓是让
  • matlab练习程序(线性分类器<最小二乘>)

    clear all close all clc num 4 元素数量 k 180 迭代次数 step 0 1 迭代步长 w 1 0 5 1 1 权值 x 1 0 0 输入的值 每行为一组 1 1 0 1 0 1 1 1 1 d 1 0 1
  • 两种产生随机数的方式之间的对比(Math.random()方法 和 Random类)

    在实际开发中 产生随机数的使用很普遍 而在JAVA中主要提供了两种方式产生随机数 其一 调用Math类中的random 方法 其二 使用Random类 一 Math random 方法 基本概述 这个方法能够产生在 0 0 1 0 之间的随
  • VueCli3+vue2.6兼容ie11

    一 首先确定babel polyfill版本号 babel polyfill 7 4 0以前使用babel polyfill 之后使用core js stable 和 regenerator runtime 可参考官方文档babel pol