【vue】vue2.x解决兼容IE8以上问题:

文章目录

        • 一、vue-cli:
            • 【1】安装依赖:
            • 【2】main.js
            • 【3】配置vue.config.js文件chainWebpack方法中添加
            • 【4】babel.config.js
            • 【5】没有被编译的依赖报错
        • 二、webpack-cli:
            • 【1】下载babel-polyfill包
            • 【2】在webpack.base.conf.js中修改
            • 【3】在.babelrc文件中添加


一、vue-cli:

【1】安装依赖:
npm install babel-polyfill -D
【2】main.js
#放在最顶部,确保全面加载
import "babel-polyfill"
【3】配置vue.config.js文件chainWebpack方法中添加
chainWebpack: (config) => {config.entry.app = ["babel-polyfill", "./src/main.js"];config.module.rule('compile').test(/\.js$/).include.add(resolve('src')).add(resolve('node_modules')).end().use('babel').loader('babel-loader').end()
})
【4】babel.config.js
module.exports = {presets: [['@vue/app',{ useBuiltIns: 'entry' }]]
}
【5】没有被编译的依赖报错

如果还有报错就可能就是你自己本地或者node_modules里的一些依赖不兼容IE了
在vue.config.js中添加transpileDependencies属性 添加地址 请注意格式 要使用正则匹配的方式,如:

transpileDependencies: [/[/\\]node_modules[/\\]echarts[/\\]lib[/\\]chart[/\\]graph[/\\]/,/[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/
],

二、webpack-cli:

【1】下载babel-polyfill包
npm install babel-polyfill -D
【2】在webpack.base.conf.js中修改

把 entry: { app: ‘./src/main.js’ } 更换为 entry: { app: [“babel-polyfill”, “./src/main.js”]},

entry: { app: ["babel-polyfill", "./src/main.js"]},

在module下的rules下的对象中 使用include来选择处理哪些js(可以在浏览器看哪些模块报错)

{test: /\.js$/,loader: 'babel-loader',include: [resolve('src'),resolve('test'),resolve('node_modules/webpack-dev-server/client'),resolve('node_modules/resize-detector/esm'),resolve('node_modules/vue-echarts/components'),]
},
【3】在.babelrc文件中添加
"presets": [["env",{"modules": false,"useBuiltIns": "entry",   // 重点"targets": {"browsers": ["> 1%","last 2 versions","not ie <= 8"]}}],"stage-2"
],

ie 报错SCRIPT5022: SecurityError sockjs.js (1683,3)
经过百度一番后 找到/node_modules/sockjs-client/dist/sockjs.js 1605行

try {// self.xhr.send(payload);把这行注掉就好啦!
} catch (e) {self.emit('finish', 0, '');self._cleanup(false);}
};

SCRIPT1002: 语法错误这个报错 就把 index.html引入的js改为在main.js里使用import引入 再挂载到window对象上

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/73373.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决Pycharm的available packages为空的问题

解决Pycharm的available packages为空的问题: 链接地址

智能小区与无线网络技术

1&#xff0e;1 智能小区 智能小区指的是具有小区智能化系统的小区。所谓小区智能化系统&#xff0c;指的是在 现代计算机网络和通信技术的基础上&#xff0c;将传统的土木建筑技术与计算机技术、自动 控制技术、通信与信息处理技术、多媒体技术等先进技术相结合的自动化和综…

快速完成工信部APP备案流程_以阿里云APP备案为例

阿里云APP备案流程分为6步&#xff0c;APP备案成功后应用可以上架&#xff0c;登录阿里云账号填写APP信息&#xff0c;等待阿里云初审&#xff0c;初审通过后进行工信部短信核验&#xff0c;管局审核通过后APP即可备案成功&#xff0c;最后移动APP应用可以分发平台上架&#xf…

网络层重点协议-IP协议(结构分析)

IP协议数据报格式 一.4位版本号 用来表示IP协议的版本&#xff0c;现有的IP协议只有两个版本IPv4和IPv6 二.4位首部长度 IP协议数据报报头的长度 三.8位服务类型 3位优先权字段&#xff08;已经弃用&#xff09;&#xff0c;4位TOS字段&#xff0c;和1位保留 字段&#xff08;必…

企业的固定资产管理怎么操作

企业是一家拥有多台大型设备的工厂&#xff0c;这些设备需要定期进行保养和维护&#xff0c;以确保其正常运转。而企业内部员工由于专业知识和技能的不同&#xff0c;需要分工协作才能更好地完成各项工作任务。因此&#xff0c;在设备资产管理方面&#xff0c;如何实现高效、便…

SpringBoot常用注解

SpringBoot常用注解 SpringBoot摒弃了xml配置方式&#xff0c;改为了全注解驱动。 准备 创建SpringBoot模块 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"ht…

使用JS实现一个简单的观察者模式(Observer)

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 手撸Observer⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领…

【TypeScript】基础知识学习笔记

theme: channing-cyan TypeScript的特点&#xff1a; JavaScript的超集&#xff0c;满足所有的JS语法含有面向对象的静态类型 起步安装&#xff1a;1、npm i typescript -g 2、tsc 文件名 一、TS的基本数据类型 基本数据类型&#xff1a;number、boolean、string、undefin…

Unity之3D物理导航系统

一 介绍 Unity自带寻路(导航)系统是unity官方自带的一种寻路系统。我们可以通过它来制作简单的寻路&#xff0c;比如可以制作点击某个位置&#xff0c;让角色自动的绕开障碍走到目标点的效果&#xff0c;比如可以制作敌人AI&#xff0c;让它可以通过NavMesh绕开障碍追击我方单…

深入理解 JVM 之——字节码指令与执行引擎

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 类文件结构 Write Once&#xff0c;Run Anywhere 对于 C 语言从程序到运行需要经过编译的过程&#xff0c;只有经历了编译后&#xff0c;我们所编写的代码才能够翻译为机器可以直接运行的二进制代码&#x…

【web开发】4、JavaScript与jQuery

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、JavaScript与jQuery二、JavaScript常用的基本功能1.插入位置2.注释3.变量4.数组5.滚动字符 三、jQuery常用的基本功能1.引入jQuery2.寻找标签3.val、text、appe…

笔记 | 排序算法实现(Python)

排序算法 一、选择排序二、合并/归并排序三、快速排序四、计数排序 排序类型时间复杂度选择排序(Selection Sort) O ( n 2 ) O(n^{2} ) O(n2)合并/归并排序&#xff08;Merge Sort&#xff09; O ( n log ⁡ n ) O(n\log n ) O(nlogn)快速排序(Quick Sort)平均情况 O ( n log ⁡…

如何使用SQL系列 之 如何在SQL中使用CASE表达式

引言 编程语言通常以条件语句为特征&#xff0c;它们是执行特定操作直到满足特定条件的命令。一个常见的条件语句是if, then, else语句&#xff0c;它通常遵循以下逻辑: if conditiontruethen action Aelse action B这条语句的逻辑可以翻译成如下语言:“如果condition为真&am…

帧动画实现

背景&#xff1a; pag实现痛点 文档&#xff1a;libpag参考文档 1.打包依赖的类型缺失问题 2.pagview初始化文件过大,影响小程序打包 3.兼容性较差关键帧动画实现痛点: 当关键帧变化过多的时候&#xff0c;无法准确分辨出需要写出多少个关键帧&#xff0c;以及各个关键帧的具…

SpringBoot-配置优先级

配置 SpringBoot项目支持的三种格式的配置文件 application.properties&#xff1a;这是最常用的配置文件类型&#xff0c;使用键值对的形式来配置应用程序的属性。可以在该文件中配置应用程序的端口号、数据库连接信息、日志级别等。 application.yml&#xff1a;这是一种更…

微信小程序开发---小程序的页面配置

目录 一、小程序页面配置的作用 二、页面配置和全局配置的关系 三、页面配置中常用的配置项 一、小程序页面配置的作用 在每个小程序中&#xff0c;每个页面都有自己的.json配置文件&#xff0c;用来对当前页面的窗口外观&#xff0c;页面效果进行配置。 二、页面配置和全局…

视频监控/视频汇聚/安防视频监控平台EasyCVR如何将默认快照的raw格式改为jpg/base64格式?

视频监控/视频汇聚/安防视频监控平台EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。视频云存储EasyCVR平台能在复…

身份识别与鉴权技术调研方案

对称加密算法 对称加密方式又称为私钥加密方式&#xff0c;该方式的加密和解密过程使用同一个密钥&#xff0c;因此该密钥又称为共享密钥。如图2.2所示&#xff0c;在对称加密方式中&#xff0c;发送方使用对称加密算法和共享密钥处理原始数据&#xff0c;得到一个加密后的密文…

IDEA新建的Moudle失效显示为灰色

现象&#xff1a;IDEA新建的Moudle失效显示为灰色&#xff01;&#xff01;&#xff01; 解决方案&#xff1a; 1. 右键点击父模块&#xff0c;选择Open Moudle Settings&#xff1a; 2. 点击加号&#xff0c;选择Import Moudle - 导入模块&#xff1a; 3. 找到对应模块的po…

0016Java程序设计-springboot幼儿园管理系统

摘 要目 录系统设计开发环境 摘 要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于幼儿园管理系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了幼儿园管理系统&a…