最近做一个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下引入。