问题描述：最近项目的监控大屏要在客户TV（安卓5.1）上展示，但是打开链接显示白屏，啥错都没有；经过多方查找、分析，确认应该是安卓系统版本的原因，目前已知的是Android 6.0 以上都 OK，6.0 以下就不行了。
低版本安卓系统内置的 webview 不支持 ES6 语法等一些新特性，所以报错。但在手机上调试不方便，受一篇文章的启发， IE 浏览器也是同样的问题，所以可以在 IE 上调试，一个调好了两个就都好了。突然发现万恶的 IE 还是有点用的…
附上方案之前，首先感谢Cheri Chang，原理没问题，不过要针对自己出现的特殊问题稍作修改，以下是我的配置流程：
1、根目录下新建 .babelrc 文件
{"presets": ["@babel/preset-env"],"plugins": ["@babel/plugin-transform-runtime"]}
2.修改 babel.config.js
module.exports = {presets: [['@vue/app',{useBuiltIns: 'entry',polyfills: ['es6.promise','es6.symbol']}]]}
3、修改 main.js 文件，导入依赖
import '@babel/polyfill'import Es6Promise from 'es6-promise'require('es6-promise').polyfill()Es6Promise.polyfill()
4、配置vue.config.js
const path = require('path');function resolve(dir) {return path.join(__dirname, '.', dir);}module.exports = {... // 其他配置// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。// 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来// 重要transpileDependencies: ['node_modules/webpack-dev-server/client'],chainWebpack: config => {//重要config.entry.app = ['@babel/polyfill', './src/main.js']//重要：通过add方法，配置babel需要另外转换的文件config.module.rule('compile').test(/\.js$/).include.add(resolve('src')).add(resolve('test')).add(resolve('static')).add(resolve('node_modules/webpack-dev-server/client')).add(resolve('node_modules')).end().use('babel').loader('babel-loader').options({presets: [['@babel/preset-env', {modules: false}]]});}}
5、安装依赖
npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise @babel/polyfill babel-plugin-transform-remove-console
按照此流程最起码解决了我刚开始的报错问题，但是依然显示不了；浏览器控制台显示app.js里面的一个报错，不过看着也像是es6没有转换的问题，抱着尝试的心态，在项目中搜索了下app.js，在src\store\modules下找到，将其加入到babel-loader转换的列表,故本人的vue.config.js配置如下（标注“本人配置”是新增配置）：
const path = require('path');function resolve(dir) {return path.join(__dirname, '.', dir);}module.exports = {... // 其他配置// 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。// 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来// 重要transpileDependencies: ['node_modules/webpack-dev-server/client'],chainWebpack: config => {//重要config.entry.app = ['@babel/polyfill', './src/main.js']//重要：通过add方法，配置babel需要另外转换的文件config.module.rule('compile').test(/\.js$/).include.add(resolve('src')).add(resolve('src/store/modules')) //本人配置.add(resolve('tests')) .add(resolve('mock'))//本人配置.add(resolve('build')) //本人配置.add(resolve('plop-templates'))//本人配置.add(resolve('public')) //本人配置.add(resolve('static')).add(resolve('node_modules/webpack-dev-server/client')).add(resolve('node_modules')).end().use('babel').loader('babel-loader').options({presets: [['@babel/preset-env', {modules: false}]]});}}
此时本地npm run dev，安卓4.4.2(TV)、5.0及以上系统均可展示；
不过在发布到测试环境和线上环境时，发现没有生效，主要问题在第5步安装依赖，npm时使用–save-dev只会将依赖保存到package.json的devDependencies中，只有开发环境才有效，其他环境无效；故将命令修改为以下命令：
# 如果知道依赖的确切版本，可以直接配置到package.json的dependencies中npm install --save @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise @babel/polyfill # To install it, you can run: npm install --save -- # @babel/runtime/helpers/createForOfIteratorHelper # 如果上一步没有报缺少该依赖，可以不要npm install –save @babel/runtime
此时安装完成后，直接打包发布即可；
如果在安装过程中出现报错，可以删除原有的node_modules、package-lock.json文件后，在package.json的dependencies中手动配置上面几个依赖，直接npm install即可
"@babel/core": "^7.12.10","@babel/plugin-transform-runtime": "^7.12.10","@babel/polyfill": "^7.12.1","@babel/preset-env": "^7.12.11","@babel/runtime": "^7.12.5","es6-promise": "^4.2.8",
–save-dev说明：
--save || -S // 运行依赖（发布）–save-dev || -D //开发依赖（辅助）区别是它们会把依赖包添加到package.json 文件–save ： dependencies 键下，发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。(1)尽量还是使用此命令，因为一般情况下，我们线上也需要同样的依赖(2)使用此命令安装后，会在package.json中dependencies新增依赖项，如果我们知道依赖项确切版本，也可以直接到json文件添加，以后在打包时，直接npm install即可–save-dev ： devDependencies 键下，开发时的依赖比如安装 js的压缩包gulp-uglify 因为我们在发布后用不到它，而只是在我们开发才用到它。
