Vue项目兼容IE11

使用的是vue-typescript-admin-template项目（vue-cli3脚手架搭建）进行改造的，但在IE11下面出现各种语法错误，下面将解决方法记录下来，供大家参考。

下面是错误截图：

语法错误：

Promise 错误

polyfill

默认的Vue CLI项目会使用@vue/babel-preset-app，它通过@bable/preset-env和browserslist配置来决定项目需要的polyfill。

默认情况下，它会把useBuiltIns: 'usage' 传递给@bable/preset-env，这样它会根据源代码中出现的语言特性自动检测需要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而，这也意味着如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。

直接照Vue CLi浏览器兼容性中上解决方法：

第一步：在babel的相关配置文件（babel.config.js、.babelrc 或package.json 的babel字段任意一个）中， 增加

"useBuiltIns": "entry"

注：babel7版本以后，会有差异 (https://babeljs.io/docs/en/babel-polyfill/)

下面我们配置.babelrc文件：

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "entry"
        }
      ]
    ]
  }

第二步： 安装'@babel/polyfill'，并在入口文件main.js中引入

npm install --save @babel/polyfill

引入的话官网推荐使用：

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

最后重新启动项目，应该可以解决IE11问题。

如果还是不行可以在vue.config.js中配置transpileDependencies，默认情况下babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在 transpileDependencies 选项中列出来。

如果项目中使用了CSS var()， IE11是不兼容的，我们可以使用css-vars-ponyfill

npm install --save css-vars-ponyfill

在main.js中引入即可：

import cssVars from 'css-vars-ponyfill'
cssVars({})

 

参考资料：

https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage

https://zhuanlan.zhihu.com/p/103907934