Vue2适配低版本浏览器 以及低版本安卓手机webview

原本是vite+Vue3写的工程 测试了不少手机都没有问题 结果测试最后一个Android 手机时 没想到Android版本比之前还高的手机竟然白屏 并且也不报错（应该就是ES6语法兼容性问题） 后来发现是因为手机的webview版本是40多 然而又有这种手机需求 就在网上找了好久 试来试去还是只有vue2能显示 无奈只能被迫降级 害。。。

据网上查询得知 Vue3 使用了 ES6 的 Proxy 作为观察者机制 并且无法通过 polyfill 进行转换

主要就三步操作

1. 装插件

npm i @babel/plugin-transform-arrow-functions @babel/plugin-proposal-optional-chaining -D

2. main.ts最顶部添加

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

3. babel.config.js 没有就在根目录新建

// babel.config.js
module.exports = {
    presets: [
        "@vue/cli-plugin-babel/preset",
        [
            "@babel/preset-env",
            {
                useBuiltIns: "entry",
                corejs: 3,
                targets: {
                    ios: "8",
                    android: "4",
                    chrome: "58",
                },
            },
        ],
    ],
    plugins: [
        "@babel/plugin-transform-arrow-functions", // 箭头函数转换
        "@babel/plugin-proposal-optional-chaining", // 可选链（?.）转换
    ],
};

最后附上我工程兼容成功的库版本 其他版本不知是否兼容 不过可以参考