资阳长途汽车站,天巡,ca1923
由于iview编译使用到了es6的一些新特性，internet explorer所有版本中都会报错，缺少includes、findixdex等问题。
本人研究涉及到的环境：vuecli3.2 + iview 3.1.5
在ie中不支持es6的新特性，例如：includes、findindex……
以下方案可以解决该问题：
1. github iview仓储issues中提到的
改编译范围请用 transpiledependencies: [‘iview']，不要用 include.add，因为默认配置里用了 exclude，在 webpack 中，多个条件同时存在时需要每个条件都满足才执行 rule。
但是加了这个选项后在所有浏览器里都会报错，因为 iview 里这个文件不兼容 es module。该文件是用很旧版本的 umd 格式打包的，新版本 umd 修复了报错的问题，但没有解决和 es module 互操作的问题。在 webpack 4 中，es module 不能和 commonjs / umd 混用。
所以这里本质上是 iview 对 webpack 4 支持的问题，让他们把源码全部转成 es module 就好了。
在vue.config.js中添加transpiledependencies: [‘iview']后，可以让bable编译过程中检查iview的代码，自动添加代码中用到的polyfill。
但是由于iview中有一个文件使用的umd打包，所以编译后的代码还是在运行环境中报错，导致项目无法使用。
该方案虽然解决了es6语法问题，但是实际使用会报错。
2. 直接给代码添加polyfill
修改bable.config.js使用 usebuiltins: ‘entry'
我要评论
module.exports = {presets: [ ['@vue/app', {usebuiltins:'entry'} ] ]}
在vue入口文件main中导入bable的polyfill
import'@babel/polyfill';
这种方案bable编译时，会自动导入目标浏览器（browserslist中配置）需要用到的polyfill,可以保证全局代码使用都可以新es代码。但是，也许有些polyfill会一直用不到，额外增加了编译后的文件体积。
3. 使用balbe env，预置iview中所需要的polyfill（推荐做法）
修改bable.config.js 添加预导入的polyfill。目前我的项目中用到的polyfill有'es6.promise'，‘es6.array.find-index'，‘es7.array.includes'，‘es6.string.includes'
module.exports = { presets: [ ['@vue/app', {
debug:true,
polyfills: [ 'es6.promise' , 'es6.array.find-index' , 'es7.array.includes' , 'es6.string.includes' ]
} ] ]}
这种方案依然使用vue项目默认方案，不同的是在项目编译时，会导入polyfills中指定的polyfill，这样既可解决iview在ie中运行报错的问题。
上面中是我目前用到的几polyfill，如果需要其它铺垫，可以自行添加。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论