浏览器出错
解决问题一(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}
,
}),
],