使用VUE“全面兼容”IE浏览器，并且跨域

最新推荐文章于 2024-08-06 14:05:31 发布

置顶 Where-to-go

最新推荐文章于 2024-08-06 14:05:31 发布

阅读量1.8k

点赞数 3

分类专栏： VUE web端开发

本文链接：https://blog.csdn.net/weixin_45523183/article/details/108349203

版权

web端开发同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

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

兼容性

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
        }
    }
},