详解使用VueJS开发项目中的兼容问题
本篇文章针对在vue项目中 遇到的兼容性问题以及解决方法做了详细的总结、
一,VUE项目一般会使用axios,而axios又是基于promise的,所以,IE任何版本都不支持(trident内核的全不行)
解决方案一:
/*ie兼容 Promise*/
isIE();
function isIE() {
//ie?
if ( !! window.ActiveXObject || "ActiveXObject" in window) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "/js/unity/bluebird.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
}
/*ie兼容 Promise end*/
解决方案二 (babel):
具体:https://blog.csdn.net/weixin_46034375/article/details/107926680
1.安装 babel-polyfill 依赖包:npm install babel-polyfill --save
2.在 vue 项目的 mian.js 中引用即可:import 'babel-polyfill'
1. 安装babel-polyfill 执行以下命令,重启服务器:
npm install --save babel-polyfill
2.在main.js引入
import 'babel-polyfill'
3.在webpack.base.conf.js中配置:
entry: {
app: ['babel-polyfill','./src/main.js']
},
解决方案三:VueJS在IE中提示promise未定义的问题
//安装promise
$ npm install es6-promise --save-dev
2. 引用并调用
在main.js文件:
import promise from 'es6-promise'
promise.polyfill()
二 、IE不支持箭头函数
解决方案:
①可以安装插件,
②不使用箭头函数,直接用function函数,只需var that = this来指代this
三、异步回调函数中this无法指向vue实例
解决方案:将function函数改为箭头函数
四、解决移动端某些版本的浏览器,点击事件有3s延时触发的问题
· 安装 fastclick 依赖包:npm install fastclick --save-dev
· 在Vue项目的Main.js中将 fastclick 绑定到 body 即可:
import fastClick from 'fastclick'
fastClick.attach(document.body)
五、css样式
清除 css 初始样式:reset.css
解决2倍、多倍屏1px边框的问题:border.css
备注:这些css文件在百度搜索就可以找e到