? ? 最近做一個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+）的兼容性修复的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。