前序
项目突然要求兼容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;
}
