vue3 + vite 项目兼容性问题

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    target: "es2015"
  }
})

通过指定打包后的目标版本就行了，vite会将新的语法通过esbuild进行转换，此时我们在支持esm的浏览器上访问时正常的。（注意只有打包后的代码才会有效）
我们看下打包后的index.html文件。

可以看到script标签上使用了type="module"属性，显然即便我们的脚本里面已经兼容到了es2015，但是如果浏览器稍微低一点的版本的，它是支持es2015但是它不支持ESM模块(import/export)啊。

如何兼容不支持esm的浏览器！

官方提供了一个插件：legacy

官方对它的定义是：为打包后的文件提供传统浏览器兼容性支持

其实就是对不支持esm的浏览器的支持，同时还有语法降级处理。

npm i @vitejs/plugin-legacy@4.1.1 terser -D

需要注意的是vite4的legacy插件最高目前是4.1.1，再高的版本只支持vite5了，使用起来会报错。

legacy插件需要依赖terser对代码进行压缩。

使用起来也很简单，我们直接引入插件并启用即可：

// vite.config.js
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()
  ],
  build: {
    target: "es2015"
  }
})

官方定义，在没有明确指定插件配置参数targets时，他会去读取项目中的.browserslistrc文件，我们知道这个文件是一个用于配置支持的浏览器范围的文件，通常会被Babel、Autoprefixer等插件使用。

打包之后，index.html 可以看到script发生了变化，除了type="module"还有一个nomodule脚本，nomodule这个属性表示在支持esm的浏览器不运行里面的代码，而不支持esm的浏览器又无法识别type=“module”，反而会去运行nomodule的script，从而实现了降级区分。

这个方式的好处在较新的浏览器中可以使用新的特性，旧的浏览器使用legacy降级脚本，从而避免了以前打包时一刀切的兼容方式，所有的代码全部降级处理，使得一些新设备没法体现出新语法的性能。