vue3 打包低版本浏览器问题

浏览器出错

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"

plugins: [
	legacy()
	//.....
]

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

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

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