900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > vue遇到ie兼容问题如何处理_Vue 2.0 解决IE浏览器的兼容性

vue遇到ie兼容问题如何处理_Vue 2.0 解决IE浏览器的兼容性

时间:2018-07-27 08:48:31

相关推荐

vue遇到ie兼容问题如何处理_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)

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。