随着微软公司宣布停止对Internet Explorer 11的支持，越来越多的用户开始升级他们的浏览器。但在一些特定场景下，如企业内部应用，依旧需要兼容IE11。
如果您的Vue.js项目在IE11上出现了问题，可能是因为JS中使用的某些特性不兼容IE11。本文将介绍一些常见的问题和解决方案。
兼容IE11的Vue.js版本
Vue.js v2.6是最后一个支持IE11的版本，v3不再支持IE11。
// 安装兼容IE11的Vue.js版本 npm install vue@2.6.x
polyfills填坑
在IE11中缺少一些新的JS特性，如Promise和Object.assign等。 Polyfill可以为这些API提供替代品。Vue CLI有一个 "@vue/cli-plugin-babel/preset"插件可以自动生成Babel配置文件以使用polyfills。只需要在.browserslistrc文件中添加IE11。
-- -------------------- ---- -------
- ------------
-
--------------- -
-- ----
----- - ----------
---- -- -- ---
--- ---
-
-安装"@vue/cli-plugin-babel/preset"插件并更新package.json文件：
-- -------------------- ---- -------
-- -- ------------------------------ --
---- --- ---------------------
-- --
--- ------- ---------- ---------------------
-- -- ------------ --
-
---------- -
-------------------------------- -
-------------- --------
------------ -
--------------
---------------------
--------------------
-
--
-
-创建一个vue.config.js文件，以确保Browserlist配置也应用于Vue CLI和webpack。
-- -------------------- ---- -------
-------------- - -
---------------------- -------------- --------
-------------------- ------
----------------- -
------------- - ------------ ----- -
--
------------- ------ -- -
-----------------------------------------
-
--CSS预处理器
IE11不支持某些CSS特性，如变量声明。 如果您的项目使用SASS或LESS等preprocessors，则可以通过安装postcss-preset-env并添加以下内容进行转换。
// 安装 postcss-preset-env npm install postcss-preset-env --save-dev
在.postcssrc.js中添加：
// .postcssrc.js
module.exports = {
plugins: {
'postcss-preset-env': {
browsers: 'last 2 versions, ie >= 11'
}
}
}所需的v-model polyfill：
import "core-js/stable"; import "regenerator-runtime/runtime";
兼容性检测工具
最后，请记得考虑为IE11用户提供兼容的前端交互体验，建议使用W3C指南来进行兼容性测试。
// 安装 w3c-css npm install -g w3c-css // 安装 w3c-validator npm install -g html-validator
总结
兼容IE11可能有些棘手，但是由于历史原因，您的应用程序必须支持。在本文中，我们解决了一些常见的问题，并为您提供了如何使Vue.js兼容IE11的解决方案。需要注意使用有效的工具来进行测试和验证。
让我们一起同行！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b911f95b1f8cacd336951