Vue2.0在IE11版本浏览器中的兼容性问题

 更新时间:2023年04月04日 16:33:52   作者:pinbolei  
这篇文章主要介绍了Vue2.0在IE11版本浏览器中的兼容性问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

用vue2.0开发做兼容时,你可能会发现vue项目在IE11版本浏览器中是空白的。。。

看到空白的页面你可能会懵几秒钟,没事,下面我们就来解决这个问题~

让IE11支持vue2.0

首先用npm 安装babel-polyfill

npm install --save-dev babel-polyfill 

然后在webpack.base.conf.js 文件中修改 module.exports 中的entry,添加 babel-polyfill:

修改前

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  ...

修改后

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },
  ...

然后再main.js中引入:

import 'babel-polyfill'

完成上述一系列操作之后,在IE11浏览器中重新跑下项目,你就会发现,你辛苦做的页面出现了!

但是页面有可能还会没有出现!!!,这时首先查看控制台,看看是否报错,根据报错情况查找原因。在这说再一个特别的原因,static下的js文件中用了ES6的语法,针对这个问题,解决方法如下:

在webpack.base.conf.js文件中添加resolve('static')

修改前:

module: {
  rules: {
      ...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      ...
  }
}

修改后:

module: {
  rules: {
      ...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('static'), resolve('node_modules/webpack-dev-server/client')]
      },
      ...
  }
}

但是如果你的项目中有router-link标签的话,点击一下你会发现,嗯,又出问题了,路由无法跳转,这是千万不要荒,稳住,下面解决这个问题。

IE11上router-link无法跳转,主要是因为当url的hash change的时候,浏览器没有做出相应。

这时候需要做一个兼容,当浏览器是IE11时手动给url加一个hashChange事件

下面是在网上找的两种方法

第一种

new Vue({
  el: '#app',
  router,
  store,
  template: '<Layout/>',
  components: { Layout },
  render: function (createElement) {
    if ('-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style) {
      window.addEventListener('hashchange', () => {
        var currentPath = window.location.hash.slice(1)
        if (this.$route.path !== currentPath) {
          this.$router.push(currentPath)
        }
      }, false)
    }
    return createElement(Layout);
  }
})

第二种

直接添加在 main.js 入口文件的最后即可

if (
  '-ms-scroll-limit' in document.documentElement.style && 
  '-ms-ime-align' in document.documentElement.style
) { // detect it's IE11
  window.addEventListener("hashchange", function(event) {
    var currentPath = window.location.hash.slice(1);
    if (store.state.route.path !== currentPath) {
      router.push(currentPath)
    }
  }, false)
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3 使用provide inject父子组件传值失败且子组件不响应

    vue3 使用provide inject父子组件传值失败且子组件不响应

    这篇文章主要介绍了vue3使用provide inject父子组件传值传不过去且传递后子组件不具备响应性问题解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue中的v-cloak使用解读

    Vue中的v-cloak使用解读

    本篇文章主要介绍了Vue中的v-cloak使用解读,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Vue下载Excel后报错,或打不开的解决

    Vue下载Excel后报错,或打不开的解决

    这篇文章主要介绍了Vue下载Excel后报错,或打不开的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • ElementUI 详细分析DatePicker 日期选择器实战

    ElementUI 详细分析DatePicker 日期选择器实战

    这篇文章主要介绍了ElementUI详细分析DatePicker 日期选择器实战教程,本文通过实例代码图文介绍给大家讲解的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • vue中 router.beforeEach() 的用法示例代码

    vue中 router.beforeEach() 的用法示例代码

    导航守卫主要是通过跳转或取消的方式守卫导航,本文通过示例代码讲解vue中 router.beforeEach() 的用法,感兴趣的朋友跟随小编一起看看吧
    2023-12-12
  • vue-video-player实现实时视频播放方式(监控设备-rtmp流)

    vue-video-player实现实时视频播放方式(监控设备-rtmp流)

    这篇文章主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 详解Vue单元测试Karma+Mocha学习笔记

    详解Vue单元测试Karma+Mocha学习笔记

    本篇文章主要介绍了详解Vue单元测试Karma+Mocha学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue.js directive自定义指令详解

    Vue.js directive自定义指令详解

    这篇文章主要介绍了Vue.js directive自定义指令详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Vue前端后端的交互方式 axios

    Vue前端后端的交互方式 axios

    这篇文章主要介绍了Vue前端后端的交互方式 axios,axios 为第三方数据请求库,下文具体的内容介绍需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-04-04
  • Vue0.1的过滤代码如何添加到Vue2.0直接使用

    Vue0.1的过滤代码如何添加到Vue2.0直接使用

    Vue0.1的过滤代码如何添加到Vue2.0直接使用,这篇文章主要介绍了过滤代码添加到Vue2.0用的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08

最新评论