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