Vue3项目兼容旧版本android设备

方案是引入babel/polyfill及其相关依赖

• 1、安装相关

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

• 2、main.ts第一行引入

import 'babel-polyfill'
import Es6Promise from 'es6-promise'
require('es6-promise').polyfill()
Es6Promise.polyfill()

• 3、修改babel.config.js,targets里面相当重要,否则用Hbuildx或者Cordova打包之后在低版本安卓上会白屏,报语法错误

module.exports = {
  presets: [
    [
      "@vue/app",
      {
        targets: {
          browsers: ['ie >= 9', 'safari >= 7']
        },
        useBuiltIns: "entry",
        polyfills: ["es6.promise", "es6.symbol"],
      },
    ],
    [      "@babel/preset-env",      {        modules: false,        useBuiltIns: "entry",        corejs: 2,      },    ],
  ],
};

• 4、修改package.json文件browserslist配置

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11",
    "Chrome > 50"
  ]

5、增加.babelrc文件与vue.config.js同级

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

6、修改vue.config.js

module.exports = defineConfig({
  // transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production' ? './' : './',
  // transpileDependencies: ['webpack-dev-server/client'],
  transpileDependencies: ['*'],
  chainWebpack: config => {
    config.entry.app = ['babel-polyfill', './src/main.js'];
  }
})