當(dāng)使用IE瀏覽器訪問Vue網(wǎng)站時(shí),有時(shí)會(huì)出現(xiàn)頁面空白的情況。這種情況通常是由于IE瀏覽器不兼容Vue框架導(dǎo)致。
原因如下:
<!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文件來墊片修補(bǔ)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標(biāo)簽來統(tǒng)一解決IE瀏覽器兼容性問題:
<!-- 強(qiáng)制IE以當(dāng)前Edge版本為渲染版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
使用vue-cli搭建的Vue項(xiàng)目,可以在.babelrc中添加配置來自動(dòng)添加polyfill:
{
"presets": [
["@babel/preset-env", {
"modules": false,
"useBuiltIns": "usage",
"targets": {
"browsers": [
"last 2 versions",
"not ie<= 8"
]
}
}]
]
}
以上是Vue結(jié)合IE瀏覽器兼容性問題的解決方法。