vue-socket.io 对IE浏览器（IE10+）的兼容性修复

最近做一个web端智能机器人聊天系统，由于前端用的vue框架，就选用了vue-socket.io,github地址：https://github.com/MetinSeylan/Vue-Socket.io。

最终运行之后，谷歌，火狐都没有问题，试了一下ie,ie9，ie10，ie11都运行不了，看了一下控制台，报错了（其实就是ie浏览器不兼es6的语法）。万恶的ie，没想到ie11也不支持。

网上搜索了很多解决方案，最终目的都是对引入的vue-socket.io 的js再编译打包之类的思路，试过之后都没有效果。

最终决定从源头上来解决。

对于了解nodejs的话，其实我们项目中引入

import VueSocketIO from 'vue-socket.io'

是从node_modules中找到vue-socket.io文件夹下的dist目录下的vue-socketio.js

所以有的提议在这里改，但是这样不利于后期多人操作，或项目开发环境的变更。

通过以上的分析，我的解决思路是对vue-socket.io进行重新打包编译，生成的 vue-socketio.js单独引入到项目中，不再通过node_modules文件夹引入。

从github项目（https://github.com/MetinSeylan/Vue-Socket.io）下载的vue-socket.io 项目，安装依赖包之后，npm run build之后，打开dist目录中的vue-socketio.js,通过编译后代码，全局搜索后发现，js文件代码中仍然存在es6中的箭头函数 =>之类，这也是为什么ie报错的根本原因。

解决方法：

以下是vue-socket.io 项目的 package.json和webpack.config.js ，重新添加了依赖包和编译的配置信息，对原的vue-socket.io 项目进行替换，删除原来的node_modules，重新安装包 npm install 之后再进行npm run build，生成dist/vue-socketio.js 文件放到你目前项目的下。(这里是对vue-socket.io 这个项目，不是你的自身项目)

在你目前项目中src下新建socket文件放入编译后dis/vue-socketio.js文件，

把你目前项目引入的

import VueSocketIO from 'vue-socket.io'

替换成

import VueSocketIO from 'src/vue-socket.io' //引入路径根据实际项目情况而定，这里只是参考

以下是修改后的package.json和webpack.config.js：

package.json

{"name": "vue-socket.io","author": "Metin Seylan <metinsyln@gmail.com>","version": "3.0.10","description": "socket.io implementation for Vue.js and Vuex","main": "dist/vue-socketio.js","scripts": {"build": "webpack --mode=production --progress --hide-modules"},"repository": {"type": "git","url": "git+https://github.com/MetinSeylan/Vue-Socket.io.git"},"keywords": ["vuejs","socket","vue","socket.io","websocket","socket.io-client","realtime","flux","vuex","redux"],"license": "MIT","bugs": {"url": "https://github.com/MetinSeylan/Vue-Socket.io/issues"},"homepage": "https://github.com/MetinSeylan/Vue-Socket.io","dependencies": {"socket.io-client": "^2.1.1"},"devDependencies": {"@babel/core": "^7.7.7","@babel/plugin-transform-runtime": "^7.7.6","@babel/preset-env": "^7.7.7","@babel/runtime": "^7.7.7","babel-loader": "^8.0.6","babel-polyfill": "^6.26.0","@babel/plugin-proposal-class-properties": "^7.1.0","@babel/plugin-transform-classes": "^7.7.6","cross-env": "^5.2.0","webpack": "^4.41.4","webpack-cli": "^3.3.10"}
}

webpack.config.js

module.exports = {mode: process.env.NODE_ENV,entry: ["./src/index.js"],output: {library: "VueSocketIO",libraryTarget: "umd",libraryExport: "default",filename: "vue-socketio.js",globalObject: "typeof self !== 'undefined' ? self : this"},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader",options: {"presets": [["@babel/preset-env", {"targets": {"browsers": ["> 1%", "last 2 versions"]}}]],plugins: ["@babel/plugin-proposal-class-properties","@babel/plugin-transform-classes"]}}}]}
};

总结：

其实就是重新对vue-socket.io项目重新打包编译，把编译生成的js在项目src中引入，不在通过node_modules下引入。

vue-socket.io 对IE浏览器（IE10+）的兼容性修复相关推荐

koa+mysql+vue+socket.io全栈开发之web api篇
原文地址:koa+mysql+vue+socket.io全栈开发之web api篇目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd ...
一个基于 Spring Cloud + Vue + Socket.IO 的在线聊天网站，不来体验一下吗？
前言 2022年8月1日,经过一系列的准备工作,这个充满 BUG 的神奇网站在今天发布上线了.因为网站目前的主要功能是在线聊天,所以暂且就先叫它 EasyChat 吧. EasyChat 是一个可以在 ...
利用dao传值给mysql_koa+mysql+vue+socket.io全栈开发之数据访问篇
后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作. 关于数据库方案, mongodb 和 mysql 都使用过,但我选用的是 mysql,原因: 目前为 ...
Socket.IO介绍：支持WebSocket、用于WEB端的即时通讯的框架
一.基本介绍 WebSocket是HTML5的一种新通信协议,它实现了浏览器与服务器之间的双向通讯.而Socket.IO是一个完全由JavaScript实现.基于Node.js.支持WebSocket ...
记一次Socket.IO长链服务的性能压测
网易云信IM系统中的Web版使用了Socket.IO实现浏览器环境下的长链服务:区别于常规的长链服务,为该服务的压测提出了一些新的挑战,本文总结了测试过程中的一些收获供参考. Part1 测试工具选项 ...
Nodejs实时通讯在线聊天室（Socket.io)_收藏
前言网络聊天室在web1.0的时代就出现了,但当时技术支持比较有限,大都是通过浏览器插件BHO,JavaApplet,Flash实现的.如今HTML5技术风起云涌,通过websocket实现的网络聊 ...
socket.io简单说明及在线抽奖demo
socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...
Socket.io 聊天室（代码已开源）
1.启发 1.1 最近得闲有空玩一下Socket.io跟RabbitMQ所以造个小项目自己玩玩. 1.2 当然不是正式项目,个人复习测试所用.设计部分有的地方也不太合理,UI也是随便弄的. 1. ...
大型项目实战Vue+Vuex+Koa2+Socket.io+Jssdk联合打造无人点餐系统
课程简介此套视频教程为2018年推出的,项目使用Vue+Vuex+Koa2+Socket.io+Jssdk+小票打印机打造无人点餐系统,课程视频.课件.源码齐全,手把手教会学员用Vue开发一个颠覆传 ...
Vue全家桶+Socket.io+Express/Koa2打造网页版手机QQ
Vue全家桶+Socket.io+Express/Koa2打造的网页版手机QQ(web app),高仿手机QQ7.1.0版本.为了方便大家学习,现在IP定位接口和实时气温接口也开放了!接口请在源码中查 ...

vue-socket.io 对IE浏览器（IE10+）的兼容性修复

vue-socket.io 对IE浏览器（IE10+）的兼容性修复相关推荐

最新文章

热门文章