标签：plugin legacy 打包 vue3 vitejs 白屏 vite
开发环境：vite4.0+vue3.2
使用场景：vite打包后将包嵌入app使用。
问题描述：打包后app显示白屏。
解决方案：默认的构建目标是能支持 原生 ESM 语法的 script 标签、原生 ESM 动态导入 和 import.meta 的浏览器。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持
1.安装兼容插件 @vitejs/plugin-legacy
npm i @vitejs/plugin-legacy
2.在vite.config plugins中配置
legacy({
targets: ['defaults', 'not IE 11']
}),
3.先执行 npm run build 命令进行打包，打包完成后打开 dist/index.html。
将index.html中所有的<script></script> 标签中的 type="module"、crossorigin、nomodule 删除。
ps:以上步骤做完如果还存在白屏可能是浏览器版本过低，可以在vite.config中设置legacy兼容低版本。
如 legacy({
targets: ['chrome 62'],
}),
标签：plugin,
legacy,
打包,
vue3,
vitejs,
白屏,
vite
From： https://www.cnblogs.com/FengWenQi/p/17085777.html