前言:网上找了好多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浏览器阴影无效果,多行文本显示几行其余显示身略号等问题,都不是大问题,都容易,可以忽略的样式效果问题能忽略就忽略,不行的话就需要修改样式了。还有每人遇一坑,坑坑不一样,多试试!

Logo

前往低代码交流专区

更多推荐