vue3+vite部署后不兼容低版本浏览器问题解决办法

vue3+vite+element-plus项目打包部署后在低版本浏览器显示空白页,不加载网络请求和代码文件,使用plugin-legacy打包后仍有如下报错的综合解决办法: 

     

     

配置步骤

1.下载安装 plugin-legacy 和 core-js 这两个插件

npm install @vitejs/plugin-legacy

npm install core-js

 2.在vite.config.js做如下配置

import legacy from "@vitejs/plugin-legacy"; 

export default defineConfig(({}) => {
  return {
    plugins: [
      vue(),
      //将下方代码粘贴到项目中
      legacy({
        targets: ['firefox < 59','chrome < 60'],
        additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
        renderLegacyChunks: true,
        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.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: {
      target: "es2015"
    },
    resolve: {

    },
    // vite 相关配置
    server: {
      
    },
    css: {
      
    }
  }
})

3.在main.js文件中引入,要在最上方引入

import "core-js/features/object/entries";
import "core-js/features/object/values";

至此,重新打包部署即可 !

测试浏览器版本为firefox 45.0。