vue3解决低版本浏览器兼容性问题

1、安装babel/polyfill及其相关依赖

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"; //(一定要在最上面，第一行)
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import Es6Promise from "es6-promise";
require("es6-promise").polyfill();
Es6Promise.polyfill();
import { createApp } from "vue";
import App from "./twoRandOneRG.vue";
import "@/registerServiceWorker";
import router from "@/router";
import store from "@/store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "@/assets/styles/css/base.scss";
import "@/assets/styles/iconfont/iconfont.css";
import { createPinia } from "pinia";
const app = createApp(App);
app
  .use(store)
  .use(ElementPlus)
  .use(router)
  .use(createPinia())
  .mount("#app");

3、手动修改babel.config.js文件

module.exports = {
  presets: [
    [
      "@vue/app",
      {
        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 ie <= 11"
	  ]

5、在vue.config.js中

   module.exports = {
   	transpileDependencies:['*']
   }

6、创建.babelrc文件与vue.config.js同级

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