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

---

一、vue-cli：

【1】安装依赖：

npm install babel-polyfill -D
1

【2】main.js

#放在最顶部，确保全面加载
import "babel-polyfill"
1
2

【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()
})
1
2
3
4
5
6
7
8
9
10
11
12
13

【4】babel.config.js

module.exports = {
  presets: [
    ['@vue/app',
     { useBuiltIns: 'entry' }]
  ]
}
1
2
3
4
5
6

【5】没有被编译的依赖报错

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

transpileDependencies: [
    /[/\\]node_modules[/\\]echarts[/\\]lib[/\\]chart[/\\]graph[/\\]/,
    /[/\\]node_modules[/\\][@\\]test2[/\\]test3[/\\]/
],
1
2
3
4

二、webpack-cli：

【1】下载babel-polyfill包

npm install babel-polyfill -D
1

【2】在webpack.base.conf.js中修改

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

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

在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'),
 
  ]
},
1
2
3
4
5
6
7
8
9
10
11
12

【3】在.babelrc文件中添加

"presets": [
    [
      "env",
      {
        "modules": false,
        "useBuiltIns": "entry",   // 重点
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "not ie <= 8"
          ]
        }
      }
    ],
    "stage-2"
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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);
    }
};
1
2
3
4
5
6
7

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