admin管理员组文章数量:1644498
一,前言
上一篇,介绍了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:
编写文章
添加代码下载链接地址
版权声明：本文标题：一步一步实现中后台管理平台模板-13-解决IE浏览器兼容性问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729383057a1199230.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论