當使用IE瀏覽器訪問Vue網站時,有時會出現頁面空白的情況。這種情況通常是由于IE瀏覽器不兼容Vue框架導致。
原因如下:
<!DOCTYPE html>
<html>
<head>
<!-- ... ... -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script></head>
<body>
<div id="app">...</div>
<script>
var app = new Vue({
el: '#app',
// ... ... ...
})
</script>
</body>
</html>
Vue 2.x不支持IE8及更低版本瀏覽器。在IE 9及更高版本瀏覽器,需要引入polyfill.js文件來墊片修補IE瀏覽器存在的API缺陷。
解決方法如下:
<!DOCTYPE html>
<html>
<head>
<!-- ... ... -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="./path/to/polyfill.min.js"></script>
</head>
<body>
<div id="app">...</div>
<script>
var app = new Vue({
el: '#app',
// ... ... ...
})
</script>
</body>
</html>
另外,還可以使用IE Meta標簽來統一解決IE瀏覽器兼容性問題:
<!-- 強制IE以當前Edge版本為渲染版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用vue-cli搭建的Vue項目,可以在.babelrc中添加配置來自動添加polyfill:
{
"presets": [
["@babel/preset-env", {
"modules": false,
"useBuiltIns": "usage",
"targets": {
"browsers": [
"last 2 versions",
"not ie<= 8"
]
}
}]
]
}
以上是Vue結合IE瀏覽器兼容性問題的解決方法。