vue-cli项目中使用Vue、iview并兼容ie9及以上浏览器遇到的问题

朱雀 2022-02-16 09:54 268阅读 0赞

最近在写一个后台管理系统，用的vue-cli的架子，ui框架使用的iview，要求兼容IE9及以上浏览器，但是在ie上会出现多种不兼容问题：

### 问题一：IE不支持es6 ###

ie浏览器下，页面出不来。  
解决方法：  
1、安装 babel-polyfill  
npm install babel-polyfill  
2、引入babel-polyfill  
在webpack.base.conf.js中

![Image 1][]

image.png

修改成：

![Image 1][]

image.png

### 问题二：ie10以下，iview的日期组件在选择时间的时候出不来，以及下拉框无法选中的问题 ###

原因是：iview-admin中直接用到了DOM的dataset属性，需要向后兼容  
解决方法：  
第一种方式：  
1、安装element-dataset；  
2、在main.js中引入

import ElementDataset from 'element-dataset';
    ElementDataset();

第二种方式：  
直接在index.html中引入一段js代码

<script>
              var isIE = function(){
                  return (window.navigator.userAgent.indexOf("MSIE")>=1);
              }
    
              // 修复IE10及以下版本不支持dataset属性的问题，兼容transfer-dom.js中使用了dataset的问题
              if (isIE() && window.HTMLElement) {
                  if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
                      Object.defineProperty(HTMLElement.prototype, 'dataset', {
                          get: function() {
                              var attributes = this.attributes;
                              var name = [],
                                  value = [];
                              var obj = {};
                              for (var i = 0; i < attributes.length; i++) {
                                  if (attributes[i].nodeName.slice(0, 5) == 'data-') {
                                      name.push(attributes[i].nodeName.slice(5));
                                      value.push(attributes[i].nodeValue);
                                  }
                              }
                              for (var j = 0; j < name.length; j++) {
                                  obj[name[j]] = value[j];
                              }
                              return obj;
                          }
                      });
                  }
              }
          </script>

### 问题三：IE不支持promise ###

ie下报错：promise未定义  
解决方法：  
1.安装es6-promise  
npm install es6-promise  
2.引入es6-promise  
在main.js中

import promise from 'es6-promise'
    promise.polyfill()

### 问题四：ie9不支持placeholder属性 ###

解决方法：  
1.安装  
npm install ie-placeholder  
2、引入  
在main.js中

import 'ie-placeholder'

转载：https://www.jianshu.com/p/eedc45e82e38

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目兼容ie浏览器

1、问题 vue项目在ie浏览器下，会报Symbol 未定义的错，还有其他一些es6-10中出现的新的语法不兼容的问题 2、解决方法安装babel-polyfi

淩亂°似流年/ 2022年11月04日 00:58/ 0 赞/ 230 阅读

相关针对IE浏览器的兼容性ie7、ie8、ie9

相对于来说浏览器的兼容性对于小伙伴来说是很头疼的吧！今天我在修改代码的时候，对于var cvts = document.getElementsByClassName("ap

- 日理万妓/ 2022年09月16日 13:27/ 0 赞/ 354 阅读

相关 jquery-form.js 兼容IE8 IE9等以上火狐谷歌等浏览器

最近做了一个文件上传用ajaxfileupload.js 在火狐谷歌 IE9及以上版本可用为了兼容IE8 找到了jquery-form.js html 代码： <

本是古典何须时尚/ 2022年07月17日 01:18/ 0 赞/ 224 阅读

相关 Vue项目兼容IE浏览器

Vue项目部署到服务器后，通常除IE浏览器外其他都正常，而IE浏览器会报这么个问题 ![这里写图片描述][SouthEast] 因为Vue使用了ES6 Promise，而I

绝地灬酷狼/ 2022年06月09日 01:28/ 0 赞/ 380 阅读

相关 iview在ie9及以上的兼容问题解决方案

是时候亮出这张图了： ![1][] 可是ie不是你不想兼容就不兼容啊。说多了都是泪。使用iview已经有一年多的时间。总的来说，iview还是给我的工作带来

小咪咪/ 2022年04月24日 10:12/ 0 赞/ 491 阅读

相关 vue-cli 兼容ie，vue项目兼容ie9.ie11

1、首先 npm install --save babel-polyfill 2、然后在`main.js`中的最前面引入`babel-polyfill`

￡神魔★判官ぃ/ 2022年03月30日 04:47/ 0 赞/ 711 阅读

相关【兼容IE】简单的 IE9 以上兼容ES6语法、箭头函数，代码

![在这里插入图片描述][2019031518121062.png] ![在这里插入图片描述][2019031518121062.png] <!DOCTY

男娘i/ 2022年03月12日 04:29/ 0 赞/ 687 阅读

相关 vue-cli项目中使用Vue、iview并兼容ie9及以上浏览器遇到的问题

最近在写一个后台管理系统，用的vue-cli的架子，ui框架使用的iview，要求兼容IE9及以上浏览器，但是在ie上会出现多种不兼容问题：问题一：IE不支持es6

朱雀/ 2022年02月16日 09:54/ 0 赞/ 269 阅读

相关完整vue+iview兼容IE9以上的解决办法

1. 支持ES6新语法，安装babel-polyfill > IE不支持es6语法安装 npm install --save babel-polyfi

柔情只为你懂/ 2021年12月10日 13:49/ 0 赞/ 295 阅读

相关 vue cli3 兼容ie8以上浏览器，前端兼容；解决ie浏览器下白屏问题

1下载 babel-polyfill 模块 npm install babel-polyfill -s 2入口文件（main.js）第一行引入 impor

缺乏、安全感/ 2021年09月01日 04:20/ 0 赞/ 752 阅读