vue兼容ie11和360兼容模式

背景：vue在ie11和360兼容模式下打开，页面显示空白页

解决办法：亲测有效

npm install core-js

main.js中引入

import 'core-js/stable'
import 'regenerator-runtime/runtime'

babel.config.js中加入

presets: [
   '@vue/cli-plugin-babel/preset',
   [
     '@babel/preset-env',
     {
       useBuiltIns: 'entry',
       corejs: 3
     }
   ]
],

通过以上代码即可解决，除此外还有一些其他不兼容的地方

ie11不支持以下代码生成的视频

<template>
    <video width="100%" autoplay muted loop>
       <source src="../../../assets/images/pc_cn.mp4" type="video/mp4" />
       您的浏览器不支持 video 标签。
    </video>
</template>

<style scoped lang="scss">
    video {
      object-fit: cover;
      height: calc(100vh - 128px);
      margin-bottom: -23px;
    }
</style>

解决办法，直接使用video标签代替，删除里面的source标签

<video
    src="网络路径"
    autoplay
    muted
    loop
    id="cover-video"
></video>

如果依旧不支持可以使用以下代码

<template>
  <div>
    <object
      width="100%"
      :height="height"
      data="视频地址"
    >
      <param name="movie" value="video.swf" />
      <param name="allowFullScreen" value="true" />
      <param name="flashvars" value="video=video.mp4" />
      <embed
        src="视频地址"
        type="application/x-shockwave-flash"
        allowfullscreen="true"
        flashvars="video=video.mp4"
        width="100%"
        :height="height"
      />
    </object>
  </div>
</template>

<script>
export default {
  data() {
    return {
      height: 300
    };
  }
};
</script>

ie11不支持object-fit: cover;样式

解决办法，判端ie11和360兼容模式下设置video高为100%或者auto

const ua = window.navigator.userAgent.toLowerCase()
const new_ie = ua.indexOf('trident/')
//兼容ie11和360兼容模式
if (window.navigator.mimeTypes[40] || !window.navigator.mimeTypes.length || new_ie !== -1) {
    const video = document.getElementById('cover-video')
    video.style.height = 'auto'
}

ie11不支持position: sticky;样式

解决办法，监听窗口滚动，定位元素滚动到顶部时添加绝对定位的class，不在顶部时移除该class

<div class="menu-box" id="sticky-element">
    <div class="u-flex u-row-between">
        <div
          @click="toMenu(item.id)"
          class="menu"
          :class="current === item.id ? 'act' : ''"
          v-for="item in menuList"
          :key="item.title"
        >
          {{ item.title }}
        </div>
    </div>
</div>
export default {
    data() {
        return {
            stickyElement: null,
            stickyOffset: 0
        }
    },
    mounted() {
        this.stickyElement = document.getElementById('sticky-element')
        this.stickyOffset = this.stickyElement.offsetTop
        window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
    },
    methods: {
        handleScroll() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            const ua = window.navigator.userAgent.toLowerCase()
            const new_ie = ua.indexOf('trident/')
            //兼容ie11和360兼容模式
            if (window.navigator.mimeTypes[40] || !window.navigator.mimeTypes.length || new_ie !== -1) {
                    if (window.pageYOffset >= this.stickyOffset) {
                      this.stickyElement.classList.add('sticky')
                    } else {
                      this.stickyElement.classList.remove('sticky')
                    }
             }
        }
    },
    //由于是在整个window中添加的事件，所以要在页面离开时摧毁掉，否则会报错
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
    }
}

<style scoped lang="scss">
    .sticky {
        position: fixed;
        top: 0;
    }
    .menu-box {
        position: sticky;
        z-index: 999;
        top: 0;
        background-color: #ffffff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
        width: 100%;
    }
</style>

ie11不支持window.scrollTo

解决办法，判断是否支持scrollTo，不支持使用scrollIntoView()

const el = document.getElementById(id)
const isSmoothScrollSupported = 'scrollBehavior' in document.documentElement.style
if (isSmoothScrollSupported) {
    window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })
} else {
    el.scrollIntoView()
}