最近在使用vue開發(fā)項(xiàng)目時(shí)，遇到了一個(gè)問題，就是在IE11瀏覽器下無法正常顯示頁面。經(jīng)過一番排查發(fā)現(xiàn)是vue在IE11下的兼容性問題。

vue在IE11下最大的兼容性問題就是不支持ES6的一些語法，因此需要安裝一些babel插件來將代碼轉(zhuǎn)換成IE11能夠識(shí)別的ES5語法。

npm install babel-polyfill babel-plugin-transform-remove-strict-mode babel-plugin-transform-es2015-classes

以上的babel插件分別是：

• babel-polyfill：可以讓你直接在代碼中使用ES6+的語法和API，而不用管運(yùn)行環(huán)境是否支持它們
• babel-plugin-transform-remove-strict-mode：移除嚴(yán)格模式，IE11下嚴(yán)格模式會(huì)導(dǎo)致一些語法錯(cuò)誤
• babel-plugin-transform-es2015-classes：將ES6 classes語法轉(zhuǎn)換成ES5的構(gòu)造函數(shù)

在babel配置文件中，需要添加以上的babel插件，如下：

{
"presets": [
[
"@vue/cli-plugin-babel/preset",
{
"useBuiltIns": "entry",
"corejs": 3
}
]
],
"plugins": [
"@babel/plugin-transform-runtime",
"transform-remove-strict-mode",
"transform-es2015-classes"
]
}

添加完成后，重新運(yùn)行項(xiàng)目，可以發(fā)現(xiàn)在IE11下可以正常顯示頁面了。