vue+axios+vue-router兼容ie9

参考:Vue 兼容 ie9 的全面解决方案

前序

项目突然要求兼容ie9...可是用到的技术栈对ie9似乎不是很友好,综合上面的参考的文章,需要添加以下内容:

1.ES6兼容

ES6兼容的话,需要安装特定的模块,执行 命令npm isntall babel-polyfill,然后在文件配置:

babel-polyfill配置

2.vue-router的history模式兼容

因为vue-router对于ie9默认是退回到hash模式的,所以在new router的时候,需要设置fallback:false(默认值为true)

fallback:当浏览器不支持 history.pushState 控制路由是否应该回退到 hash 模式。默认值为 true。
在 IE9 中,设置为 false 会使得每个 router-link 导航都触发整页刷新。它可用于工作在 IE9 下的服务端渲染应用,因为一个 hash 模式的 URL 并不支持服务端渲染。
配置示例:

const router = new Router({
  fallback: false,
  base: "/test/",
  mode: "history",
  routes: []
})

3跨域

尽管后端已经配置了CORS,但是在ie9情况下,CORS无效,所以需要nginx设置反向代理.
参考:vue项目部署方式:tomcat部署和nginx部署

4设置了nginx反向代理仍然无法获取response.data

设置了反向代理,正常发出和获取响应,但是response.data却为空值,响应值被存到response.request.responseText中.这时候要利用axios.interceptors.response适当添加兼容代码:

Axios.interceptors.response.use(
  function(response) {
    //判断是否有是ie9
    if (isIE9()) {
      //特殊处理response
      if (response.status == 200 && response.request) {
        if (
          response.request.responseType === "json" &&
          response.request.responseText
        ) {
          response.data = JSON.parse(response.request.responseText);
          console.log("repsonse", response);
        }
      }
    }
    return response;
  },
  function(error) {
    if (error.response) {
         // 对响应错误做点什么
    console.log("error", error);
    return Promise.reject(error);
  }
);

function isIE9() {
  if (
    navigator.appName == "Microsoft Internet Explorer" &&
    parseInt(
      navigator.appVersion
        .split(";")[1]
        .replace(/[ ]/g, "")
        .replace("MSIE", "")
    ) <= 9
  ) {
    return true;
  }
  return false;
}

推荐阅读更多精彩内容

  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 510评论 0 0
  • 前言部分 一、跨域是什么? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源(广义的)。 广义的跨域场景有以...
    爆发吧小宇宙阅读 2,056评论 0 12
  • 前言 背景情况 vue - 2.5.11 vue-cli 使用模板 webpack-simple http请求:a...
    Terry05阅读 5,865评论 2 18
  • 又是两天没有写字,这里想讲一下这两天发生的一些事情。奶奶生病,我每天都要带着宝宝去陪一下她,天气很冷气温零下,第一...
    露露Yao阅读 111评论 1 1
  • 人生总要有一次郑重的询问“我是谁”。 离婚一年整两个月,一个人的生活孤单又自由。当然,一开始也很失落和无奈...
    别让我不安阅读 88评论 0 0
  • 到了某个年纪,寂寞就会深入女人的夜里。从毛孔到内心!这是北京的第五年,当初的初生牛犊不怕虎,如今的些许自卑怀疑。从...
    14e8ed72ae66阅读 90评论 0 0