vue兼容 安卓5.0及以下版本

将es6转为es5

下载插件 

 

npm install --save-dev @babel/core @babel/plugin-transform-runtime @babel/preset-env es6-promise babel-polyfill 

在main.js中引用

import 'babel-polyfill'

import Es6Promise from 'es6-promise'

require('es6-promise').polyfill()

Es6Promise.polyfill()

在项目根目录下新建 .babelrc 文件，跟 package.json 同级

{

 "presets": ["@babel/preset-env"],

 "plugins": [

  "@babel/plugin-transform-runtime"

 ]

}

在babel.config.js文件中配置

const plugins = [];

module.exports = {

 presets: [

  [

   "@vue/app",

   {

    "useBuiltIns": "entry",

    polyfills: [

     'es6.promise',

     'es6.symbol'

    ]

   }

  ]

 ],

 plugins: plugins

}

在vue.congig.js中进行配置

const webpack = require("webpack");

const path = require('path');

function resolve(dir) {

  return path.join(__dirname, '.', dir);

}

  

 transpileDependencies: ['webpack-dev-server/client'],

    chainWebpack: config => {

        config.entry.app = ['babel-polyfill', './src/main.js'];

       

    },

一般配置到这里就能解决白屏问题

 

如果没有就把下面这段代码 放入 vue.config.js文件chainWebpack: config => { }中

 config.module.rule('compile')

            .test(/\.js$/)

            .include

            .add(resolve('src'))

            .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

                    }]

                ]

            })