尽管一些高级浏览器对用 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)
}