首先要说的是:vue 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性,比如Object.defineProperty()此方法就会报错,如下图:
所以,用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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。