vue.js - Vue 项目不兼容 IE11 浏览器如何解决？

Question

vue项目不兼容ie11浏览器怎么办 有用npm install --save @babel/polyfill。core-js 和 regenerator-runtime和es6-promise 都有用但是都报错？

Answer 1

看看是什么项目，如果是 vue-cli 的大概率本身就支持。只改 browserslist 就完事了。

如果是自己搭建的，那么就看看 webpack 版本，然后针对性处理了

Answer 2

Vue 项目在 IE11 浏览器上遇到兼容性问题时，通常是因为 Vue 或其依赖的库使用了 IE11 不支持的 ES6+ 语法或特性。为了解决这个问题，你需要确保构建后的代码是 ES5 兼容的，并且包含所有必要的 polyfills（填充物）来补充 IE11 缺失的功能。

如果你已经尝试使用 @babel/polyfill（注意，@babel/polyfill 已经被废弃，推荐使用 core-js 和 regenerator-runtime 单独配置），但仍然遇到问题，下面是一些步骤来排查和解决问题：

1. 更新 Babel 配置：
   确保你的 Babel 配置（通常在 .babelrc 或 babel.config.js 中）正确设置了针对 IE11 的目标。你可能需要添加或更新 targets 选项来包含 IE11。

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "entry",
           "corejs": 3, // 使用 core-js 3
           "targets": "> 0.25%, not dead" // 你可以明确指定 "ie 11"
         }
       ]
     ]
   }

2. 引入 Polyfills：
   由于 @babel/polyfill 已被废弃，你应该单独安装并使用 core-js 和 regenerator-runtime。在你的入口文件（通常是 main.js 或 index.js）中，你需要引入它们：

   import 'core-js/stable';
   import 'regenerator-runtime/runtime';

注意，core-js/stable 将会引入所有 polyfills，这可能会导致你的包体积变得很大。为了优化，你可以按需引入特定的 polyfills。

3. 确保所有依赖都是兼容的：
   检查你的所有依赖项是否都支持 IE11。有时，某些第三方库可能使用了 IE11 不支持的语法或特性。
4. 使用 Vue CLI 插件：
   如果你正在使用 Vue CLI，你可以考虑使用 babel-preset-app 插件来自动配置 Babel。此外，Vue CLI 3+ 默认包含了对 IE11 的兼容性配置。
5. 检查构建配置：
   确保你的 Webpack 构建配置没有错误地排除或转换了必要的 polyfills。
6. 查看控制台错误：
   打开 IE11 浏览器的开发者工具，并查看控制台中的错误。这些错误可能会给你关于问题来源的线索。
7. 升级依赖项：
   确保你的所有依赖项都是最新的，因为旧版本可能包含与 IE11 不兼容的 bug。
8. 考虑使用其他工具：
   如果以上步骤都无法解决问题，你可能需要考虑使用其他工具或库来帮助你实现兼容性，例如 babel-polyfill 的替代方案或第三方兼容性库。
9. 使用 Polyfill 服务：
   考虑使用像 Polyfill.io 这样的服务来动态地按需提供 polyfills。
10. 测试：
    在每次更改配置或引入新的依赖项后，都要在 IE11 上进行彻底的测试，以确保你的更改没有引入新的问题。