vite/vue3 解决了兼容问题，钉钉浏览器白屏问题； antDesign的下拉框、modal弹出框的兼容性问题

1、配置

直接上结论，
vite.config.js:

viteCompression 是gzip的，可以忽略
WindiCSS是一个很好用的css插件，可以忽略
esbuild 必要
legacy 必要，其中的polyfills和modernPolyfills是对应不用的功能（问就是不知道）
build 必要
参考的资料

20231215，csdn一键注释真好用，vscode你看看人家

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import esbuild from "rollup-plugin-esbuild";
import { resolve } from "path";
import usePluginImport from "vite-plugin-importer";
import styleImport from "vite-plugin-style-import";
import WindiCSS from "vite-plugin-windicss";
import viteCompression from "vite-plugin-compression";
import legacy from "@vitejs/plugin-legacy";

// 导出配置对象
export default defineConfig({
  plugins: [
    vue(), // Vue 插件
    WindiCSS(), // WindiCSS 插件
    viteCompression(), // 压缩插件
    esbuild({ // esbuild 插件
      target: "chrome64", // 目标浏览器
      loaders: {
        ".vue": "js", // Vue 文件的加载器
        ".ts": "js", // TypeScript 文件的加载器
      },
    }),
    legacy({ // 兼容性插件
      targets: [ // 目标浏览器列表
        "> 0%", // 全球使用率超过 0%
        "Chrome > 4", // Chrome 版本大于 4
        "Android >= 4", // Android 版本大于等于 4
        "IOS >= 7", // iOS 版本大于等于 7
        "not ie <= 6", // 不支持 IE 6 及以下版本
        "Firefox ESR", // Firefox ESR 版本
      ],
      additionalLegacyPolyfills: ["regenerator-runtime/runtime"], // 额外的兼容性 polyfills
      renderLegacyChunks: true, // 渲染兼容性代码块
      polyfills: [ // 兼容性 polyfills
        "es.symbol",
        "es.promise",
        "es.promise.finally",
        "es/map",
        "es/set",
        "es.array.filter",
        "es.array.for-each",
        "es.array.flat-map",
        "es.object.values",
        "es.object.define-properties",
        "es.object.define-property",
        "es.object.get-own-property-descriptor",
        "es.object.get-own-property-descriptors",
        "es.object.keys",
        "es.object.to-string",
        "web.dom-collections.for-each",
        "esnext.global-this",
        "esnext.string.match-all",
      ],
      modernPolyfills: [ // 现代浏览器的 polyfills
        "es.symbol",
        "es.promise",
        "es.promise.finally",
        "es/map",
        "es/set",
        "es.array.filter",
        "es.array.for-each",
        "es.array.flat-map",
        "es.object.values",
        "es.object.define-properties",
        "es.object.define-property",
        "es.object.get-own-property-descriptor",
        "es.object.get-own-property-descriptors",
        "es.object.keys",
        "es.object.to-string",
        "web.dom-collections.for-each",
        "esnext.global-this",
        "esnext.string.match-all",
      ],
    }),
  ],
  build: {
    minify: "terser", // 使用 Terser 进行代码压缩
    target: ["edge90", "chrome90", "firefox90", "safari15"], // 目标浏览器，适配低版本浏览器
  },
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"), // 设置别名
    },
  },
});

其中，esnext.global-this 可以被代替为
index.html——header

<script>
      !(function (t) {
        function e() {
          var e = this || self;
          (e.globalThis = e), delete t.prototype._T_;
        }
        "object" != typeof globalThis &&
          (this
            ? e()
            : (t.defineProperty(t.prototype, "_T_", {
                configurable: !0,
                get: e,
              }),
              _T_));
      })(Object);
    </script>

2、antDesign2的select下拉框、modal框的兼容性问题

还是在钉钉浏览器下（我用的专有钉钉）（或者什么版本低到离谱的浏览器）
在以上配置了后，antDesign2的select下拉框、modal框还是不能正常使用。
所以，我直接使用了element plus ,它的下拉框和弹出框倒是正常使用，所以，一拍即合，解决问题！

此处再留下antDesign2的select下拉框点击后的error报告，大佬有心的话，烦请指点一二
ღ( ´･ᴗ･` )比心

Uncaught (in promise) 
Object {name: "TypeError", message: "window...
message: "window.ResizeObserver is not a constructor"
name: "TypeError"
stack: "TypeError: window.ResizeObserver is not a constructor\n at c (http://192.168.2.13:9984/assets/index.9740e80f.js:28:80209)\n at http://192.168.2.13:9984/assets/index.9740e80f.js:28:80281\n at callWithErrorHandling (http://192.168.2.13:9984/assets/index.9740e80f.js:1:86677)\n at callWithAsyncErrorHandling (http://192.168.2.13:9984/assets/index.9740e80f.js:1:86799)\n at Array.t.__weh.t.__weh.o (http://192.168.2.13:9984/assets/index.9740e80f.js:1:35933)\n at flushPostFlushCbs (http://192.168.2.13:9984/assets/index.9740e80f.js:1:89705)\n at flushJobs (http://192.168.2.13:9984/assets/index.9740e80f.js:1:90125)\n at flushJobs (http://192.168.2.13:9984/assets/index.9740e80f.js:1:90256)\n at <anonymous>"
__proto__: Object {}