vite构建如何兼容低版本浏览器

原创已于 2024-02-20 15:58:31 修改 · 7.1k 阅读 ·

大模型引用 5 次

本内容遵循CC 4.0 BY-SA版权协议

富朝阳

关注

标签

#数学建模 #javascript #开发语言

分类开发工具

于 2023-06-15 09:37:45 首次发布

Vue 专栏收录该内容

13 篇文章

订阅专栏

文章讲述了在使用Vite4+Typescript+Vue3.2+SSR重构博客时遇到的低版本浏览器兼容性问题，主要是由于这些浏览器不支持原生ESM导入。作者通过安装并配置@vitejs/plugin-legacy插件，以及指定构建目标为es2015，实现了对旧浏览器的兼容，包括添加必要的polyfill。同时强调vue3不支持ie11，但其他框架可能通过此插件支持ie11。

一、问题

二、解决方案

1.安装@vitejs/plugin-legacy

2.配置 vite.config.ts

三、注意点

一、问题

最近在用Vite4+Typescript+Vue3.2+SSR+React17+Angular14+qiankun微应用架构重构我的博客，在我构建上线之后发现谷歌等高版本主流浏览器运行正常，但是在公司自己操作系统的的浏览器上一直报如下的错误：Uncaught SyntaxError: Unexpected token ‘?‘

二、解决方案

经过我查看错误发现是很多低版本浏览器并不支持原生ESM导入的方式。老版本的博客使用的webpack构建的，配置了bable转义ES2015所以在低版本或者自带浏览器运行是没问题的。现在用的是vite4构建的，并没有使用bable进行转义。那vite构建怎么办呢？

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

1.安装@vitejs/plugin-legacy

npm install  @vitejs/plugin-legacy -D

注意：必须安装 Terser，因为旧版插件使用 Terser 进行缩小。

npm install  terser  -D

2.配置 vite.config.ts

同时将vite.config.ts里 build.target 配置项指定构建目标为 es2015

import { defineConfig } from 'vite';
import legacyPlugin from '@vitejs/plugin-legacy';
export default defineConfig({
  plugins: [
    // 浏览器兼容问题配置
    legacyPlugin({
      targets: ['defaults', 'not IE 11'],
      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',
    minify: 'terser',
	terserOptions: {
	  compress: {
	    //  生产环境时移除console
	    drop_console: true,
	    drop_debugger: true,
	  }
	}
  }
});