Vue 2.0 解决IE浏览器的兼容性

尽管一些高级浏览器对用 babel 编译后的 Vue 2.0 项目支持得很好,但是 IE 浏览器却还是有所欠缺,本文介绍如何解决 IE11 的兼容性(低版本的IE就忽略吧)。

1. 让IE11支持Vue2.0的语法

npm 安装 babel-polyfill

npm install --save-dev babel-polyfill 

webpack.base.conf.js 文件中修改 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 入口文件第一行引入 babel-polyfill:

import "babel-polyfill"

2. 让IE11支持Vue-router跳转功能

在IE11上无法用router-link跳转,主要是当url的hash change的时候浏览器没有做出响应。下面的代码里面做了一个兼容,直接添加在 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)
}

你可能感兴趣的:(Vue 2.0 解决IE浏览器的兼容性)