Vue2.0在IE11版本瀏覽器中的兼容性問題怎么解決

本篇內(nèi)容主要講解“Vue2.0在IE11版本瀏覽器中的兼容性問題怎么解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“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瀏覽器中重新跑下項目，你就會發(fā)現(xiàn)，你辛苦做的頁面出現(xiàn)了！

但是頁面有可能還會沒有出現(xiàn)?。。?，這時首先查看控制臺，看看是否報錯，根據(jù)報錯情況查找原因。在這說再一個特別的原因，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標(biāo)簽的話，點擊一下你會發(fā)現(xiàn)，嗯，又出問題了，路由無法跳轉(zhuǎn)，這是千萬不要荒，穩(wěn)住，下面解決這個問題。

IE11上router-link無法跳轉(zhuǎn)，主要是因為當(dāng)url的hash change的時候，瀏覽器沒有做出相應(yīng)。

這時候需要做一個兼容，當(dāng)瀏覽器是IE11時手動給url加一個hashChange事件

下面是在網(wǎng)上找的兩種方法

第一種

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版本瀏覽器中的兼容性問題怎么解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！