当前位置：网站首页>vite如何兼容低版本浏览器

vite如何兼容低版本浏览器

2022-07-02 05:41:00 【用户体验官大龙】

一、问题

在使用vue3.2和vite2.0+开发一个移动端H5，测试时发现很多低版本的安卓手机浏览器出现白屏的现象，而ios机型基本上是好的，原因是很多低版本浏览器并不支持原生ESM导入的方式，下面给出解决方案：

二、兼容原生ESM的浏览器

默认情况下，Vite 的目标浏览器是指能够支持原生 ESM script 标签和支持原生 ESM 动态导入的。作为参考，Vite 使用这个 browserslist 作为查询标准：
Chrome >=87
Firefox >=78
Safari >=13
Edge >=88

三、解决方案

步骤一： vite.config.ts里 build.target 配置项指定构建目标为 es2015

步骤二：通过插件 @vitejs/plugin-legacy 来自动生成传统浏览器的 chunk 及与其相对应 ES 语言特性方面的 polyfill。兼容版的 chunk 只会在不支持原生 ESM 的浏览器中进行按需加载。

1、安装@vitejs/plugin-legacy

yarn add @vitejs/plugin-legacy -D

2、配置 vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    legacy({
      targets: ['chrome 52'],
      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'
      ]
    }    
  ],
  build: {
    target: 'es2015'
  }
})