记一个问题解决方法
我的项目是vite+vue3的一个H5，是要嵌套在一个安卓APP内部，开发过程中使用了较多的js高版本语法，比如Promise、展开运算符、Array.prototype.flat等等，开发部署完了之后在我的pc浏览器、手机浏览器以及正常安卓webview中打开都没问题。
但是！有个用户的手机是vivox9s, 他的webview环境如下：
UA:Mozilla/5.0 (Linux; Android 8.1.0; vivo X9s Build/OPM1.171019.019; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/68.0.3440.91 Mobile Safari/537.36 rong360app R360_api_version_2.0 AppChannel_test AppVersion_4.6.8 APPID_1
重点在 Chrome/68.0.3440.91， 浏览器内核是Chrome68（2018年发布的版本）， 当前最新版本已经是Chrome138了，查了一下 Chrome68有好多新语法都不支持。。。
vite官方推荐使用plugin-legacy来解决兼容老版本浏览器的问题， 其核心原理是检测项目中用了哪些旧浏览器不支持的新方法和语法， 然后在打包时额外生成一个js文件(也叫polyfill), 内容就是使用js代码对这些方法的功能进行手动实现 比如flat()等。
并且会为打包出来的每个js文件，额外生成一个legacy文件，从ESmodule变为SystemJS兼容老版本浏览器
使用方法
安装
npm install -D @vitejs/plugin-legacy
注意： plugin-legacy要依赖 terser 不过一般vite项目会默认安装terser作为构建工具的一部分来进行代码压缩，所以不需要单独安装。
使用
// vite.config.js
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
//....
plugins: [
vue(),
//....
legacy({
renderLegacyChunks: true, //默认值 同时生成旧版构建
targets: ['Chrome >= 65', 'defaults', 'not IE 11'],
polyfills: true, //默认值 自动检测需要的polyfills 也可指定为数组
})
]
})
其他配置文档： github.com/vitejs/vite…
