iview-admin IE兼容方案(已弃坑)

原创
2018/01/24 10:27
阅读数 1.5W

iview admin 是基于 iview 的一套后台管理系统,界面清爽,功能比较完整,很适合快速上手。不过它未兼容IE(非Edge)9/10,而本该可以部分支持的。这里提供一些解决方案。

一、const polyfill

本人是通过vue-cli初始化工程的,实测发现,编译打包时,/node_modules/iview/src里的两处const变量为被转换为var,而iview/dist/里面是正确转换来的。

接着,全部照搬iview admin配置,仍然如此。

发现是webpack配置问题,解决方案:

webpack.base.conf.jstest: /\.js$/规则里,新增一个include项,即resolve('/node_modules/iview/src')

参考来源:http://blog.csdn.net/nongweiyilady/article/details/78893504

二、Promise polyfill

IE低版本原生不支持Promise,但是transform-runtime插件,应该是能提供兼容的,结果没有。

这也是webpack配置问题,没有导出全局的Promise对象。解决方法:

main.js头部添加一句window.Promise = Promise;即可。

*注意:*原版是src/vendors/vendors.base.js文件,我未完全照搬,下同。

参考来源:http://www.cnblogs.com/pheye/p/7659910.html

三、dataset polyfill

admin中直接用到了DOM的dataset属性,也需要向后兼容,解决方法:

添加依赖element-dataset,导入并初始化即可。

import ElementDataset from 'element-dataset';

ElementDataset();

四、babelrc配置参考

仅供参考,或许能解决某些IE下的奇怪兼容性问题。。。

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-0"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

弃坑

最近验证发现,在IE 11及以下仍然会报错,初步怀疑是webpack版本问题,只能使用2.7.1或更低版本。未降级验证,好在目前没这必要性,不折腾了。让IE低版本早日退出历史舞台吧。

展开阅读全文
打赏
0
3 收藏
分享
加载中
一点灵犀博主

引用来自“孙杨洋”的评论

@sjn1978 你的问题解决了么?我的问题和你的一样,iview在IE浏览器打不开
SCRIPT1002: 语法错误
报错SCRIPT5009: “webpackJsonp”未定义
尝试 CDN 引入iview吧。但是建议放弃IE,毕竟5年前的,考虑Edge或其它浏览器吧。
2018/07/30 19:59
回复
举报
@sjn1978 你的问题解决了么?我的问题和你的一样,iview在IE浏览器打不开
SCRIPT1002: 语法错误
报错SCRIPT5009: “webpackJsonp”未定义
2018/07/23 11:57
回复
举报
一点灵犀博主

引用来自“sjn1978”的评论

ie11控制台报错如下:

HTML1300: 进行了导航。
文件: localhost:8081
SCRIPT1003: 缺少 ':'
文件: vender-base.1c45b9c1470039a344cc.js,行: 1,列: 1565
SCRIPT5009: “webpackJsonp”未定义
文件: vender-exten.1c45b9c1470039a344cc.js,行: 1,列: 1

webpackJsonp按照网上查到的方法
在webpack.prod.conf.js→HtmlWebpackPlugin下面加入chunks: ['manifest', 'vendor', 'app'],
结果连chrome和firefox都无法运行了。
webpack2.8+已经不支持IE 11-了,我已放弃IE低版本;
然后2.8以下的兼容问题可以看看 https://segmentfault.com/a/1190000009613296
2018/04/13 19:27
回复
举报
ie11控制台报错如下:

HTML1300: 进行了导航。
文件: localhost:8081
SCRIPT1003: 缺少 ':'
文件: vender-base.1c45b9c1470039a344cc.js,行: 1,列: 1565
SCRIPT5009: “webpackJsonp”未定义
文件: vender-exten.1c45b9c1470039a344cc.js,行: 1,列: 1

webpackJsonp按照网上查到的方法
在webpack.prod.conf.js→HtmlWebpackPlugin下面加入chunks: ['manifest', 'vendor', 'app'],
结果连chrome和firefox都无法运行了。
2018/03/01 09:50
回复
举报
我按照上面的配置全部配置完毕
const polyfill部分,已经使用了uglifyjs-webpack-plugin

Promise polyfill,dataset polyfill部分都在main.js部分追加了响应的代码

使用npm run build打包后也没有报错
但是连最简单的iview-admin-template,就是完全不带任何插件的版本
ie11都没法运行,chrome,firefox都是好的,可以出来界面
ie11访问直接空白一片。
楼主能版本看看到底是什么问题吗?
2018/03/01 09:34
回复
举报
一点灵犀博主

引用来自“小红花”的评论

我的项目里用了iview-admin ,babelrc配置了es2015,ie还是不支持箭头函数,你有遇到过吗?
目前还没有碰到。能定位到是哪个文件吗?如果是插件导致,可能是webpack的问题,可参考const polyfill的解决方案。
2018/02/04 17:15
回复
举报
我的项目里用了iview-admin ,babelrc配置了es2015,ie还是不支持箭头函数,你有遇到过吗?
2018/01/29 16:14
回复
举报
更多评论
打赏
7 评论
3 收藏
0
分享
返回顶部
顶部