iview-admin兼容ie11浏览器，vue+iview兼容ie11

最新推荐文章于 2022-01-24 11:35:09 发布

徐RR

最新推荐文章于 2022-01-24 11:35:09 发布

阅读量1.8k

点赞数 2

文章标签： iview-admin兼容ie11 iview兼容ie11 兼容ie11

本文链接：https://blog.csdn.net/weixin_44151993/article/details/101429473

版权

iview-admin兼容ie11浏览器，vue+iview兼容ie11

写这篇文章呢是因为，在我使用iview-admin开发完管理系统整套功能后，高大的金主爸爸要求，必须兼容ie浏览器，善良一点只要兼容ie11就好。没办法了，只能兼容，在兼容的过程中，作者呢，在心里默默“吐槽”了几遍！！！
iview-admin是web端管理系统的开源框架，核心是基于vue+iview。

1、用ie浏览器打开页面一片空白

（1）安装 babel-polyfill，让ie兼容es6

    npm install babel-polyfill

（作者刚开始的时候使用了 npm install babel-polyfill --save-dev，结果并不能在ie上显示，后面去掉了–save-dev就可以了，就查了一下，npm的直接install和加-save、–save-dev的区别，有兴趣可自行了解一波）

（2）在 main.js文件第一行引入babel-polyfill

	import 'babel-polyfill'

在这里插入图片描述
######（3）在vue.config.js中配置configureWebpack信息,添加如下代码：

configureWebpack: {
    module: {
      rules: [
        {
          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']
            }
          }
        }
      ]
    }
  }

在这里插入图片描述
按以上步骤，配置完成，即可在ie11浏览器显示了。

2、全屏显示退出，在ie浏览器没反应，或者进入全屏后无法全屏退出

（1）修改fullscreen.vue文件，即可进入全屏模式

  将mounted中的msfullscreenchange改成MSFullscreenChange

在这里插入图片描述

（2）进入到你写的全屏页面，将mounted中加上监听ie的事件MSFullscreenChange

  document.addEventListener('MSFullscreenChange', () => {
    this.value = !this.value
  })
  
  ** 一定要注意大小写，作者之前用msFullscreenChange，MSfullscreenChange各种试过，
  都无法监测到退出全屏操作，最后发现MSFullscreenChange就可以监听到。

在这里插入图片描述

3、ie浏览器，发送请求到服务端，操作成功，但是页面数据没变化？

ie浏览器，向服务端发送请求，url路径若一致，浏览器会缓存第一次的内容，导致即使重新请求，页面数据也不会发送变化（刷新）。
解决方式：在每个请求后面带上当前时间的时间戳，这样就能保证，所有的请求url不同，这需要后端配合修改接口哦！
作者是直接在axios请求拦截中，在发起请求的时候，拦截给他带上时间戳，这样就不用每个url都去改咯

     if(config.method === 'get') {
        if(config.url.indexOf('?')>-1){
          let getTimestamp = new Date().getTime()
          config.url = url + '?timestamp=' + getTimestamp
        }else {
          let getTimestamp = new Date().getTime()
          config.url = url + '?timestamp=' + getTimestamp
        }
      }

在这里插入图片描述

4、js兼容问题：new Date(时间)，时间格式有要求，导致获取的时间戳有问题

.replace(/-/g,'/')

ie中使用new Date(2019-09-26).getTime() 获取时间戳会出现问题，因为无法识别‘-’，但是可以识别‘/’，所以可以用replace全局替换掉特殊符号。

   let time = '2019-9-26'
   let T = time.replace(/-/g,'/')
   let result = new Date(T).getTime()

5、checkbox样式在ie浏览器中样式问题

在这里插入图片描述
在全局样式文件中加入：

.ivu-checkbox-checked .ivu-checkbox-inner:after {
  display:block;
  -ms-transform:rotate(45deg)scale(1);/* IE 9 */
  -moz-transform:rotate(45deg)scale(1);/* Firefox */
  -webkit-transform:rotate(45deg)scale(1);/* Safari 和 Chrome */
}
.ivu-checkbox-indeterminate .ivu-checkbox-inner:after {
  display:block;
}