iview_admin兼容ie11，ie9

记录解决IView_Admin在ie11页面无法显示问题！！！

转载链接：https://www.cnblogs.com/ysxq/p/11052207.html

1.安装babel-polyfill  ==>npm install babel-polyfill

2.安装完毕之后在启动类main.js中的第一行导入==> import 'babel-polyfill'

3.在配置文件vue.config.js中配置configureWebpack信息，完整代码如下：

const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}

// 项目部署基础
// 默认情况下，我们假设你的应用将被部署在域的根目录下,
// 例如：https://www.my-app.com/
// 默认：'/'
// 如果您的应用程序部署在子路径中，则需要在这指定子路径
// 例如：https://www.foobar.com/my-app/
// 需要将它改为'/my-app/'
// iview-admin线上演示打包路径： https://file.iviewui.com/admin-dist/
const BASE_URL = process.env.NODE_ENV === 'production'
  ? '/'
  : '/'

module.exports = {
  // Project deployment base
  // By default we assume your app will be deployed at the root of a domain,
  // e.g. https://www.my-app.com/
  // If your app is deployed at a sub-path, you will need to specify that
  // sub-path here. For example, if your app is deployed at
  // https://www.foobar.com/my-app/
  // then change this to '/my-app/'
  publicPath: BASE_URL,
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: true,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
  },
  // 设为false打包时不生成.map文件
  productionSourceMap: false,
  // // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
  // devServer: {
  //   // proxy: 'localhost:3000'
  //   proxy: 'http://192.168.0.13:8080/'
  // }
  configureWebpack: {
    module: {
      rules: [
        // 'transform-runtime' 插件告诉 Babel
        // 要引用 runtime 来代替注入。
        {
          test: /\.m?js$/,
          include: [
            resolve('src'),
            resolve('test'),
            resolve('node_modules/webpack-dev-server/client'),
            resolve('node_modules/iview/src'),
            resolve('node_modules/tree-table-vue/lib'),
            resolve('node_modules/v-org-tree/dist'),
          ],
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }
}

4.bug修复

　1.ie11 下 点击右上角全屏 图标后，再次点击不退出全屏bug：将src/components/main/components/fullscreen/fullscreen.vue  里的全屏事件监听事件名纠正为MSFullscreenChange即可正常监听事件变化，功能恢复正常。   具体代码如下

document.addEventListener('msfullscreenchange', () => {
      this.$emit('input', !this.value)
      this.$emit('on-change', !this.value)
})

//更改为
document.addEventListener('MSFullscreenChange', () => {
    this.$emit('input', !this.value)
    this.$emit('on-change', !this.value)
})

2.ie9下右侧内容下坠问题：在src/components/main/main.vue   添加 float:left  样式

      
        
        

          
          
        
      
    

        //修改后


      
        
        

          
          
        
      

3.ie下其他报错处理代码，在src/view/main.js   new Vue({})下方添加以下代码

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  store,
  render: h => h(App)
})
下面是需要添加内容///

/**
*作用：兼容dataset
*问题：[Vue warn]: Error in directive transfer-dom inserted hook: "TypeError: 无法获取未定义或 null 引用的属性“transfer”"
*说明：ie10及以下不支持dataset，以下代码处理兼容
* */
if (window.HTMLElement) {
  if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
    Object.defineProperty(HTMLElement.prototype, 'dataset', {
      get: function () {
        var attributes = this.attributes; // 获取节点的所有属性
        var name = [];
        var value = []; // 定义两个数组保存属性名和属性值
        var obj = {}; // 定义一个空对象
        for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性
          if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"
            // 取出属性名的"data-"的后面的字符串放入name数组中
            name.push(attributes[i].nodeName.slice(5));
            // 取出对应的属性值放入value数组中
            value.push(attributes[i].nodeValue);
          }
        }
        for (var j = 0; j < name.length; j++) { // 遍历name和value数组
          obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中
        }
        return obj; // 返回对象
      },
    });
  }
}

/**
 *作用：兼容requestAnimationFrame（ie9）
 *问题：
 *说明：ie9是不支持requestAnimationFrame的，以下代码处理兼容
 * */
(function () {
  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
      window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function (callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function () { callback(currTime + timeToCall); },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }

  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function (id) {
      clearTimeout(id);
    };
  }
}());

/**
 *作用：兼容classList（ie9）
 *错误信息： 无法获取未定义或 null 引用的属性“add”/  无法获取未定义或 null 引用的属性“remove”
 *说明：ie9以下代码处理兼容
 * */
if (!('classList' in document.documentElement)) {
  Object.defineProperty(HTMLElement.prototype, 'classList', {
    get: function () {
      var self = this;
      function update(fn) {
        return function (value) {
          var classes = self.className.split(/s+/g);
          var index = classes.indexOf(value);

          fn(classes, index, value);
          self.className = classes.join(' ');
        };
      }

      return {
        add: update(function (classes, index, value) {
          if (!~index) classes.push(value);
        }),

        remove: update(function (classes, index) {
          if (~index) classes.splice(index, 1);
        }),

        toggle: update(function (classes, index, value) {
          if (~index) { classes.splice(index, 1); } else { classes.push(value); }
        }),

        contains: function (value) {
          return !!~self.className.split(/s+/g).indexOf(value);
        },

        item: function (i) {
          return self.className.split(/s+/g)[i] || null;
        },
      };
    },
  });
}

4.ie下报vue  {description: "无法获取未定义或 nu...", message: "无法获取未定义或 nu...", name: "TypeError", number:-21468232

解决方式:清除浏览器缓存即可，快捷键  Ctrl + Shift +Delete

5.兼容ie9

因为 IE 都不支持 promise, 解决方案:
npm install es6-promise

// 在 main.js 引入即可
// ES6的polyfill
require("es6-promise").polyfill();