一、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行文章来源:https://www.toymoban.com/news/detail-693622.html
try {
// self.xhr.send(payload);把这行注掉就好啦!
} catch (e) {
self.emit('finish', 0, '');
self._cleanup(false);
}
};
SCRIPT1002
: 语法错误这个报错 就把 index.html引入的js改为在main.js里使用import引入 再挂载到window对象上文章来源地址https://www.toymoban.com/news/detail-693622.html
到了这里,关于【vue】vue2.x解决兼容IE8以上问题:的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!