解决Vue 2.0在IE11版本浏览器中的兼容性问题

用vue2.0开发做兼容时，你可能会发现vue项目在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 IE11window.addEventListener("hashchange", function(event) {var currentPath = window.location.hash.slice(1);if (store.state.route.path !== currentPath) {router.push(currentPath)}}, false)
}

解决Vue 2.0在IE11版本浏览器中的兼容性问题相关推荐

html引入vue不兼容ie11,Vue在IE11版本浏览器中的兼容性问题
一:Vue 2.x cli1. 使用vue2.0的项目在IE11版本浏览器中是空白的或者路由跳转但是而页面显示依旧是上一个路径的页面元素这是因为ie11不支持es6 而我们之前有使用的bab ...
不同版本浏览器前端标准兼容性对照表以及CORS解决跨域和CSRF安全问题解决方案
CORS也已经成为主流的跨域解决方案,不过CORF也会引发CSRF,本文先分享第三方的一个前端工具箱全面展示那些浏览器版本支持CORS,由于各家浏览器厂商因为各自原因在不同的版本里支持的标准不同,这个 ...
【转载】Chrome插件在高版本浏览器中安装报错解决
为什么80%的码农都做不了架构师?>>> Chrome插件在高版本浏览器中安装报错解决技术 maybe yes 发表于2014-12-17 17:20 原文链接 : http: ...
python3.7不能用_解决Python3.7.0 SSL低版本导致Pip无法使用问题
终于下决心把python从2.7升到了3.7.懒人安装当然使用Anaconda. 安装成功,编译成功.但是用pip 安装包的时候提示: pip is configured with locations ...
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
01-路由跳转安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题参考文章: (1)01-路由跳转安装less this.$router.re ...
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
new Date(2019-05-10 08:00:00) 格式在IE内核或者低版本浏览器中显示NaN或者Invalid Date的问题...
js new Date("2019-05-10 08:00:00") 格式在IE内核或者低版本浏览器中显示NaN或者Invalid Date的问题. 在高级浏览器上new Date ...
在Chrome、Firefox等高版本浏览器中实现低延迟播放海康、大华RTSP
一.背景现在到处是摄像头的时代,随着带宽的不断提速和智能手机的普及催生出火热的网络直播行业,新冠病毒的大流行又使网络视频会议系统成为商务会议的必然选择,因此RTSP实时视频流播放及处理不再局限于安防 ...
php多浏览器支持,测试网站在多个浏览器中的兼容性：MultiBrowser ┆V1.3.1 多国语言版...
MultiBrowser应该是做网站设计,网站设计师必备的软件了,此软件可以测试网站在多个浏览器中的兼容性!MultiBrowser能够让你同时检查同一网页在chrome.firefox.ie等浏览器 ...
Goole插件在高版本浏览器中安装报错解决技术
manifest.json文件内容: { "name":"My First Extension", "version":"1.0& ...

解决Vue 2.0在IE11版本浏览器中的兼容性问题

让IE11支持vue2.0

解决Vue 2.0在IE11版本浏览器中的兼容性问题相关推荐

最新文章

热门文章