一步一步实现中后台管理平台模板-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浏览器下访问项目,会报出语法错误:

查看详细代码:

这是由于使用了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:
编写文章
添加代码下载链接地址