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

目录

一、问题

二、解决方案

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

npm install  terser  -D

打包、运行到浏览器。

新版本浏览器运行正常！旧版本浏览器运行正常！yyds！

三、注意点

vue3不支持ie11，因为vite并不是只为vue服务，它是一个独立的开发服务器和打包工具，也可以为react等其他框架服务，所以这是一个思维误区，别的框架是有可能通过@vitejs/plugin-legacy支持ie11的，只是vue3的proxy不能支持。

@vitejs/plugin-legacy - npm

欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

vite4+typescript+vue3+SSR博客链接：富朝阳的博客

往期回顾

css实现元素居中的6种方法

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

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

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御