最近遇到一个问题，使用 vue 脚手架打包后的项目在用户手机上打开页面是空白的。其机型是 android7.1。

最后在安卓模拟真机调试后，找到问题了，是因为打包后，有部分 es6 没有转成 es5，发现扩展运算符还在，代码不兼容，导致页面报错，显示空白。

解决办法就是在打包的时候将 es6 代码转换成 es5 代码。

这里我们需要使用 Babel 插件。

1、安装 @babel/polyfill

npm install @babel/polyfill -S

2、在入口文件 main.js 最顶部引入该插件

import "@babel/polyfill"

3、修改 babel.config.js 配置文件。

presets: [
  ["@vue/app", {
    polyfills: [
      "es6.promise",
      "es6.symbol",
      "es6.array.iterator",
      "es6.object.assign"
    ],
    useBuiltIns: "entry"
  }]
]

4、在 vue.config.js 配置文件中修改配置项 transpileDependencies。默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖

transpileDependencies: [true]

至此，项目白屏报错的问题就可以解决了。

需要注意的是从 Babel 7.4.0 开始，不再推荐使用 @babel/polyfill 包，而是直接使用 core-js/stable 和 regenerator-runtime/runtime：

安装 core-js 和 regenerator-runtime

npm install --save core-js regenerator-runtime

在项目入口文件顶部引入

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