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

本篇内容主要讲解“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版本浏览器中的兼容性问题怎么解决”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！