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

发布时间:2023-05-09 15:02:15 作者:zzz
来源:亿速云 阅读:123

本篇内容主要讲解“Vue2.0在IE11版本浏览器中的兼容性问题怎么解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue2.0在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)
}

到此,相信大家对“Vue2.0在IE11版本浏览器中的兼容性问题怎么解决”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. vue-cli如何快速搭建脚手架
  2. Vue.js 自定义指令

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue ie

上一篇:Vue3之怎么使用js实现动画

下一篇:Vue3之元素和组件的动画怎么切换

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》