瀏覽器出錯(cuò)
解決問題一（plugin-legacy為 Vite 項(xiàng)目提供對舊版瀏覽器的支持）
1. npm 下載@vitejs/plugin-legacy
可能會出現(xiàn)問題：Cannot destructure property 'renderBuiltUrl' of 'config.experimental' as it is undefined.
報(bào)如下錯(cuò)誤的原因是：
vite版本和@vitejs/plugin-legacy版本沒有對應(yīng)诡宗，因?yàn)閜lugin-legacy版本為2.x后，vite版本需要為3.x版本,
要么升級vite版本3x
要么@vitejs/plugin-legacy降級為2x一下
我的環(huán)境：
"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 函數(shù)或 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值，調(diào)試定不了位置 训貌，命名規(guī)范好像是根據(jù)文件名而不是導(dǎo)出名了
// VueSetupExtend()
// spritesPlugin(),//加了之后制肮，build不自動退出冒窍，如果使用流水線會有影響
visualizer(), //分析打包（性能優(yōu)化）
qiankun(APP_NAME, { useDevMode: true }),
createSvgIconsPlugin({
// 指定需要緩存的圖標(biāo)文件夾
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},
}),
],
