一步一步實現中後臺管理平臺模板-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:
編寫文章
添加代碼下載鏈接地址