Vue2.6+ & Vue-Cli3 兼容 ie11

2,063 阅读1分钟

楔子

在项目开发中,切换到 ie11 后,发现整个页面都是空白的,所以就赶紧查了一下相关资料,并进行了处理。

原因

造成该问题的原因是 ie11 不支持 es6+ 的代码。
vue-cli 本身默认是不会对 node_modules 中的代码进行 babel 的解析的。
而且 babel 默认情况下只对新的 JavaScript 的语法进行解析,不会去对一些新的 API 进行解析。

解决方案

情况一:单纯的只是某个依赖有 es6+ 的语法

通过 vue-cli 提供的 transpileDependencies 配置项,配置需要解析的依赖即可。

情况二:在情况一的基础上某些依赖或者项目本身使用了新的 API

新的 API 例如: Iterator、Generator、Set、Proxy、Symbol等等

就需要去安装 babel-polyfill npm install --save-dev babel-polyfill
然后在 vue.config.js 里面去配置 configureWebpack: config => { config.entry.app = ["babel-polyfill", "./src/main.js"]; }, 即可