So machen Sie Vite mit älteren Browserversionen kompatibel und lösen das Problem, dass der Browser keinen Fehler meldet, sondern eine Leerstelle öffnet

Bei einem kürzlich durchgeführten Krankenhausprojekt konnten einige Computer auf Webseiten zugreifen, während andere nicht darauf zugreifen konnten. Schließlich stellte ich fest, dass die Browserversionen unterschiedlich waren. Auf die alte Browserversion konnte nicht normal zugegriffen werden, auf den neuen Browser jedoch schon. Da das Krankenhaus eine Intranet-Umgebung ist und über eine große Anzahl von Computern verfügt, gibt es keine Möglichkeit, die Browserversion einzeln zu aktualisieren.

Nachdem ich nach einigen Informationen gesucht hatte, erfuhr ich, dass es verwendet werden kann, @vitejs/plugin-legacyum mit älteren Browserversionen kompatibel zu sein. Dieses Plug-in kann herkömmliche ES5-basierte Build-Pakete für Ihr Vite-Projekt generieren, die für ältere Browser geeignet sind.

Führen Sie zur Installation den folgenden Befehl in Ihrem Vite-Projekt aus @vitejs/plugin-legacy:

npm install --save-dev @vitejs/plugin-legacy

Sie müssen außerdem eine Abhängigkeit npm iterser -D installieren  . Wenn diese nicht installiert ist, können beim Packen Fehler auftreten.

Führen Sie das Plug-in in der Konfigurationsdatei von Vite (vite.config.js) ein und registrieren Sie es @vitejs/plugin-legacy:

export default defineConfig({
  // 其他配置项...
  
  plugins: [
    // 注册 legacy 插件
    legacy({
      targets: ['ie >= 11', 'chrome <= 60'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        'es.symbol',
        'es.array.filter',
        'es.promise',
        'es.promise.finally',
        'es/map',
        'es/set',
        'es.array.for-each',
        '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'
      ]
    }),
  ]
});