一、背景

因为项目中一些功能用到了IE的ocx组件部分,必须在IE环境下运行,按正常vue支持来说,IE8+应该是支持的,可能ES6写法需要进行兼容,我的项目就是在IE中无法打开,空白,也报一些 未定义什么的错误。
为了解决这个问题,开始查找尝试,我的环境是IE11.

二、解决方法

1、安装babel-polyfill,由于尝试好多次不成功 我的项目里面还安装了es6-promise,估计不安装也没什么问题,安装方法如下:

npm install --save babel-polyfill
npm install --save es6-promise //(可以不用安装)

2、main文件中进行引入

import 'babel-polyfill'
import promise from 'es6-promise' //(这个也可以不用引入)
promise.polyfill() //(这个也可以不用引入)

3、babel.config.js文件配置useBuiltIns

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
};

4、vue.config.js配置transpileDependencies,转译依赖
配置完以上三个如果能兼容,就不用配置了,如果发现一些 未定义,或者缺少什么符号之类的,找到报错的文件位置对应的依赖名称,添加到transpileDependencies中即可。
我的这个提示缺少‘)’。
定位错误如下
在这里插入图片描述
在这里插入图片描述

transpileDependencies: ["resize-detector"],

完成以上步骤基本就可以实现兼容IE高版本了。
**

三、注意的问题点

**
1、测试环境是IE11.
2、transpileDependencies增加了报错的包名,如果多个报错的包名,目前没测试,本项目中增加resize-detector包名以后,其他的错误全部消失,如果transpileDependencies:[]全部忽略的话会报错。
3、在main.js中引入import 'babel-polyfill’时需注意真正的包名和路径,之前我一直用import 'babel/polyfill’结果一直报错,最后发现自己的包名是babel-polyfill。
在这里插入图片描述
【腾讯云】11.11云上盛惠,云服务器首年1.8折起,买1年送3个月!境外云服务器15元/月起,买更多省更多!
https://cloud.tencent.com/act/cps/redirect?redirect=5559&cps_key=3e0f3ba5c4cc727403e88457eb5c4914&from=console

Logo

前往低代码交流专区

更多推荐