前言:网上找了好多vue兼容IE的教程步骤,但是根据我自己项目用上有多处报错。以上根据总结发布我实现兼容的解决办法
一.babel遇上的问题
网上搜到的基本都是安装babel/polyfill,npm install --save @babel/polyfill。
但是我用这个发现现在babel在7.0版本以上,不能再使用依然无法生效。
我的IE兼容解决办法里,放弃babel/polyfill的使用
二.实际解决办法
1: 安装core-js 和 regenerator-runtime和es6-promise
core-js3可以兼容/转换es6+的新api,
regenerator-runtime可以编译/转译的async
函数的运行时支持
es6-promise可以编译/转译ES6 promise对象
npm install --save core-js regenerator-runtime es6-promise
2.main.js 引入
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()
3.babel.config.js文件手动修改
module.exports = {
presets: [
// '@vue/cli-plugin-babel/preset',
['@vue/app', {
useBuiltIns: 'entry',
}]
]
}
4:在package.json文件browserslist配置
"browserslist": [
"> 1%", //" >1%" :代表着全球超过1%人使用的浏览器
"last 2 versions", //“last 2 versions” : 表示所有浏览器兼容到最后两个版本
"not ie <= 8" //“not ie <=8” :表示IE浏览器版本大于8(实则用npx browserslist 跑出来不包含IE9 )
]
5:在vue.config.js中
transpileDependencies中将所有不兼容的依赖放这里边转译
module.exports = {
transpileDependencies:[
/node_modules[/\\\\](axios|compression-webpack-plugin|core-js|echarts|electron|element-ui|extend|jquery|js-base64|qs|terser-webpack-plugin|vue|vue-drag-resize|vue-router|vue-seamless-scroll|sockjs-client)[/\\\\]/,
]
}
至此,兼容性的大问题解决了,剩下的就是些样式问题,比如IE浏览器阴影无效果,多行文本显示几行其余显示身略号等问题,都不是大问题,都容易,可以忽略的样式效果问题能忽略就忽略,不行的话就需要修改样式了。还有每人遇一坑,坑坑不一样,多试试!