楔子
在项目开发中,切换到 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"]; }, 即可