解决vue打包低版本浏览器问题

浏览器出错

image.png

解决问题一（plugin-legacy为 Vite 项目提供对旧版浏览器的支持）

1. npm 下载@vitejs/plugin-legacy

可能会出现问题：Cannot destructure property 'renderBuiltUrl' of 'config.experimental' as it is undefined.

报如下错误的原因是：
vite版本和@vitejs/plugin-legacy版本没有对应，因为plugin-legacy版本为2.x后，vite版本需要为3.x版本,

要么升级vite版本3x
要么@vitejs/plugin-legacy降级为2x一下

我的环境：

"vite": "^2.9.1",
"@vitejs/plugin-legacy": "^1.8.2",

2、在vite.config.ts中 import legacy from "@vitejs/plugin-legacy";

3、在vite.config.ts中使用 plugins: [legacy()，】

解决问题二（Top-level await 模块的最高层中使用 await 操作符）

Top-level await 新特性：它可以让你在模块的最高层中使用 await 操作符。在这之前，你只能通过在 async 函数或 async generators 中使用 await 操作符。

1、 npm install vite-plugin-top-level-await -D

2、在vite.config.ts文件中

import topLevelAwait from 'vite-plugin-top-level-await'
plugins添加topLevelAwait

vite.config.ts 总的配置:

plugins: [
vue(),
vueJSX(),
// 会加hash值，调试定不了位置 ，命名规范好像是根据文件名而不是导出名了
// VueSetupExtend()
// spritesPlugin(),//加了之后，build不自动退出，如果使用流水线会有影响
visualizer(), //分析打包（性能优化）
qiankun(APP_NAME, { useDevMode: true }),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [resolve(process.cwd(), "src/assets/svgs")],
// 指定symbolId格式
symbolId: "icon-[dir]-[name]",
}),
legacy(),
topLevelAwait({
// The export name of top-level await promise for each chunk module
promiseExportName: "__tla",
// The function to generate import names of top-level await promise in each chunk module
promiseImportName: (i) => __tla_${i},
}),
],

image.png
image.png