一步一步实现中后台管理平台模板-13-解决IE浏览器兼容性问题

一,前言

上一篇,介绍了ECharts封装,响应式,刷新问题及vue-echarts的使用,以及IE兼容性问题

这一篇,就来着重解决目前项目存在的IE兼容性问题

二,IE兼容性问题

Vue官方文档描述支持IE8+,因为Vue使用了IE8无法模拟的ECMAScript 5 特性
1)IE浏览器的兼容性问题多数由于ES6语法不支持导致,如
	Promise,Symbol
	IE8不识别vue中的var extendsFrom = child.extends; 报缺少标识符
	IE10下不识别let标识符
	IE11不识别 data(){}定义的方法,需使用data: function () {}
	等等...
	
2)非首次GET请求时,IE默认使用缓存而不发起后台请求

3)默认情况下babel-loader将忽略所有node_modules文件的转译,
如果依赖的插件使用了浏览器不识别的语法,需显式转译依赖

三,使用babel-polyfill解决ES6语法不支持问题

在IE浏览器下访问项目,会报出语法错误:
IE兼容问题_ES6_1
查看详细代码:
IE兼容问题_ES6_2

这是由于使用了ES6语法,而IE不支持导致的,需使用babel-polyfill进行转译

安装babel-polyfill:

npm install --save babel-polyfill

vue.config.js添加:

module.exports = {
  ...
  configureWebpack: config => {
    config.entry.app = ["babel-polyfill", "./src/main.js"];
  }
  ...
};

或vue.config.js添加:

module.exports = {
  ...
  chainWebpack: config => {
    config.entry("index").add("babel-polyfill");
  },
  ...
};

或直接在main.js引入babel-polyfill:

require("babel-polyfill");
// 或
import "babel-polyfill";

重新运行工程,问题解决


四,配置显式转译

上篇中,由于echarts封装使用了resize-detector导致兼容问题
在当前项目中,vue-echarts,resize-detector,vuex-persist均会导致IE兼容问题

默认情况下 babel-loader 会忽略所有 node_modules 中的文件
此时需要使用Babel 显式转译resize-detector依赖
module.exports = {
  ...
  transpileDependencies: [
    "vue-echarts", 
    "resize-detector", 
    "vuex-persist"
  ],
  ...
};

五,解决IE下GET请求缓存问题

思路: request拦截,添加时间戳,防止IE浏览器使用缓存

src/api/axios.js中,添加时间戳,防止IE浏览器使用缓存:

// 添加请求拦截器
Axios.interceptors.request.use(
  config => {
    // 添加时间戳,防止IE浏览器使用缓存
    if (config.method === "get") {
      config.params = {
        t: Date.parse(new Date()) / 1000,
        ...config.params
      };
    }
    return config;
  },
  error => {
    return Promise.reject(error.data.error.message);
  }
);

六,结尾

本篇解决了目前项目中涉及的IE浏览器兼容问题
目前只列出了这三个问题,后续遇到再添加

七,代码下载

传送门:CSDN下载
传送门:GitHub下载-vue-framework-admin-v0.0.13


维护日志

20191008:
编写文章
添加代码下载链接地址

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

BraveWangDev

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值