vue-cli3.0兼容IE浏览器
一、背景因为项目中一些功能用到了IE的ocx组件部分,必须在IE环境下运行,按正常vue支持来说,IE8+应该是支持的,可能ES6写法需要进行兼容,我的项目就是在IE中无法打开,空白,也报一些 未定义什么的错误。为了解决这个问题,开始查找尝试,我的环境是IE11.二、解决方法1、安装babel-polyfill,由于尝试好多次不成功 我的项目里面还安装了es6-promise,估计不安装也没什么问
一、背景
因为项目中一些功能用到了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
更多推荐
所有评论(0)