«

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

时间:2024-4-26 19:55     作者:韩俊     分类: Javascript


本篇内容主要讲解“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)
    }

    标签: javascript vue

    热门推荐