vue浏览器兼容性问题ie9 ie10 edge

简介: vue浏览器兼容性问题ie9 ie10 edge

首先要说的是:vue 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性,比如Object.defineProperty()此方法就会报错,如下图:


image.png


所以,用vue尽量去做那些不需要兼容ie8及其以下版本的浏览器的项目。当然了,也许你有其它方法去兼容ie8,费时费力?自己权衡吧。下边要说的是vue在兼容ie9 ---到 edge这几个版本浏览器上的问题。

情况1:

报错:ReferenceError: “Promise”未定义,原因是:Promise是es6的新语法,ie9和一些低版本的高级浏览器对es6新语法并不支持。

解决办法:npm install --save-dev babel-polyfill

babel-polyfill正确安装后,main.js里引用:import "babel-polyfill";

情况2

这个情况是用指令修改页面标题的错误,如下

Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
  }
})

ie浏览器提示属性找不到,具体的情况,总之如果要修改页面标题,用别人说的一个方法吧,如下

下载安装插件依赖 
 npm install vue-wechat-title --save  
在main.js中引入插件
 import VueWechatTitle from 'vue-wechat-title' 
 Vue.use(VueWechatTitle)

const router = new Router({
  routes: [{
      path: '/login',
      component: Login,
      meta: { title: '登录' }
    }, {
      path: '/register',
      component: Register,
      meta: { title: '注册' }
    }
  ]
})

在app.vue中修改router-view组件 
<router-view v-wechat-title='$route.meta.title'></router-view>

修改标题就ok了,在ie里也不会报错。



作者:_littleTank_

链接:https://www.jianshu.com/p/c107b0f6063c

来源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章
|
2月前
|
Windows
禁止ie自动跳转edge
禁止ie自动跳转edge
97 0
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
2月前
|
JavaScript 前端开发
|
2月前
|
JSON JavaScript 前端开发
vue如何更好的解决浏览器兼容问题
vue如何更好的解决浏览器兼容问题
53 1
|
4月前
|
存储 JavaScript 程序员
Vue学习之---浏览器本地存储(8/17)
这篇文章介绍了Vue中浏览器本地存储的使用方法,包括基础知识、localStorage和sessionStorage的代码实例及其测试效果,并提供了相关的API和操作示例。
Vue学习之---浏览器本地存储(8/17)
|
4月前
|
Web App开发 JavaScript 前端开发
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
这篇文章介绍了如何在浏览器中安装和使用Vue开发者工具,提供了两种下载方式,包括直接下载编译好的插件和从GitHub上下载源代码后进行打包。文章还详细说明了在Chrome浏览器中加载插件的步骤,以及插件在Vue项目和非Vue项目中的不同表现。
如何在浏览器中安装使用Vue开发者工具?Vue开发者工具的安装使用?可直接提取插件安装使用
|
4月前
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
159 0
VUE——如何兼容IE9|IE10|IE11浏览器
|
4月前
|
存储 NoSQL 文件存储
【Azure 环境】存储在Azure上的文件,使用IE/Edge时自动打开的问题,如何变为下载而非自动打开
【Azure 环境】存储在Azure上的文件,使用IE/Edge时自动打开的问题,如何变为下载而非自动打开
|
4月前
|
存储 JavaScript
纯Vue实现网页日常任务清单小功能(数据存储在浏览器)
这篇文章介绍了如何使用纯Vue实现一个网页日常任务清单的小功能,数据存储在浏览器中以保持数据持久化。文章内容包括功能描述、效果演示、核心代码修改方法,以及已经打包好的项目源码下载链接。作者还提供了友情提示,指出了数据存储到浏览器的核心代码部分,方便读者快速理解和应用。
|
4月前
|
JavaScript API
VUE——监听浏览器关闭及标签页关闭事件
VUE——监听浏览器关闭及标签页关闭事件
402 0
下一篇
DataWorks