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

富朝阳

已于 2024-02-20 15:58:31 修改

阅读量6.2k

点赞数 10

分类专栏： Vue 文章标签：数学建模 javascript 开发语言

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

本文链接：https://blog.csdn.net/chaoPerson/article/details/131220705

版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

一、问题

二、解决方案

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,
	  }
	}
  }
});