VUE兼容处理
前言
之前的做页游活动页面,需要使用的技术栈是:js 、jQ 、jinja2 。前端制作完成之后需要上传代码到服务器才能看到效果,比较传统的一套技术。作为前端的我也是非常头痛,最近后端同学提出后端要进行模块化可配置化开发(因为我们很多活动都很相似,仅仅是几个参数的差别),前端进行模块化的话就需要摒弃之前的技术栈,从vue中找到兼容处理方案,本文讲解vue如何全面兼容IE并且下一篇文章将会进行模块化、可配置化开发。
本次使用vue的方案技术栈为:vue、axios、vuex、vue-router、webpack、vue-cli
项目结构
├─dist
│ ├─css
│ ├─img
│ └─js
├─node_modules
├─public
└─src
├─api
├─assets
│ ├─css
│ ├─images
│ └─js
├─components
│ ├─floatNav
│ ├─footer
│ └─header
├─router
├─store
└─views
vue
兼容性
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。所以IE 7 和 8 咱们就没办法兼容了,但是咱们可以判断浏览器版本后给用户一个友善的升级提醒啊
找到 public/index.html
文件,以下就是我的善意提醒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<style>
body,
html,
#ieVersion p {
margin: 0;
padding: 0;
}
#ieVersion {
height: 90px;
background-color: #3e1f10;
margin: 0;
padding: 0;
display: none;
z-index: 9999;
text-align: center;
color: #fbf5e7;
line-height: 45px;
}
#ieVersion p a {
color: #f13c35;
}
</style>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="ieVersion">
<p>尊敬的平台玩家您好,首先感谢您的支持参与平台活动,但由于您的IE浏览器版本过低,我们建议您先升级浏览器版本,再来参与我们的活动呢</p>
<p><a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads">升级您的IE浏览器</a>,或使用<a
href="https://www.google.cn/chrome/">Google Chrome</a>等高级浏览器,将会得到更好的体验!</p>
</div>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
; (function () {
// 获取浏览器版本
function browserVersion() {
// 取得浏览器的userAgent字符串
var userAgent = navigator.userAgent
// 判断是否为小于IE11的浏览器
var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1
// 判断是否为IE的Edge浏览器
var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11
// 判断是否为IE11浏览器
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1
// 判断是否为火狐浏览器
var isFire = userAgent.indexOf('Mozilla') > -1 && userAgent.indexOf('Firefox') > -1
// 判断是否为谷歌浏览器
var isChrome = userAgent.indexOf('Mozilla') > -1 && userAgent.indexOf('Chrome') > -1 && userAgent.indexOf('Edge') == -1
var start = ''
if (isLessIE11) {
var IEReg = new RegExp('MSIE (\\d+\\.\\d+);')
// 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分,,这一步不可省略!!!
IEReg.test(userAgent)
// 取正则表达式中第一个小括号里匹配到的值
var IEVersionNum = parseFloat(RegExp['$1'])
if (IEVersionNum === 7) {
// IE7
return 'v-IE = 7'
} else if (IEVersionNum === 8) {
// IE8
return 'v-IE = 8'
} else if (IEVersionNum === 9) {
// IE9
return 'v-IE = 9'
} else if (IEVersionNum === 10) {
// IE10
return 'v-IE = 10'
} else {
// IE版本<7
return 'v-IE <= 6'
}
} else if (isEdge) {
// edge
start = userAgent.indexOf('Edge')
return 'v-Edge = ' + userAgent.substring(start + 5)
} else if (isIE11) {
// IE11
return 'v-IE = 11'
} else if (isFire) {
// Firefox
start = userAgent.indexOf('Firefox')
return 'v-Firefox = ' + userAgent.substring(start + 8)
} else if (isChrome) {
// Chrome
start = userAgent.indexOf('Chrome')
return 'v-Chrome = ' + userAgent.substring(start + 7, start + 13)
} else {
// 不是主流浏览器
return 'browserInfo = ' + userAgent
}
}
// 其实就是控制提醒内容在IE78的时候出现
var reg = /(\w+)\s\=\s(\d+)/
var version = browserVersion()
var res = reg.exec(version)
if (res[1] == 'IE' && res[2] < 9) {
// IE 7 8 提示
var tips = document.getElementById('ieVersion')
tips.style.display = 'block'
// alert('需要提示')
}
})()
</script>
</html>
axios
兼容性
看这兼容性,心先凉一截,IE11 以下都不行!!!!,想想怎么处理吧
处理操作
借助babel-polyfill
,可以使axios 兼容ie低版本浏览器,需要将入口文件添加babel-polyfill
,这个插件只能将ES6的API解析成低版本识别的,并不能解析箭头函数,如果需要解析箭头函数,还需要babel-core
安装:
npm i babel-polyfill
导入:
进入你得 webpack.config.js
或者 vue.config.js
// webpack.config.js or vue.config.js
entry: {
"babel-polyfill":"babel-polyfill",// 用来解决的兼容性
app: path.resolve(__dirname, basePath + "/app.js")
},
webpack跨域
不得不说,webpack真香,让前端人员实现跨域非常简单,不需要后端处理,也不需要复杂的操作
进入你得 webpack.config.js
或者 vue.config.js
// webpack.config.js or vue.config.js
devServer: {
proxy: {
// /api 是指我这个接口是以 api 开头的,就用下面的代理地址进行请求,不要写错了,这个与你的开发接口相关,不要直接copy!!!!
"/api": {
target: "http://www.2217.com", // 需要代理的地址
changeOrigin: true // 允许跨域
},
"/api2": {
target: "http://test.www.2217.com",
changeOrigin: true
}
}
},
对,就是进行上面简单的配置之后,你就会神奇的发现接口数据都能正常请求了,要注意代码中的注释内容(非常重要)!!!
总结
至此,你已经可以兼容IE发送请求并且ie78下有升级提示语,而且还能跨域!!!
对,就是进行上面简单的配置之后,你就会神奇的发现接口数据都能正常请求了,要注意代码中的注释内容(非常重要)!!!