解决vite+vue3混合开发白屏问题

开发环境: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'],
}),
posted @ 2023-02-02 13:53  fengwenqi  阅读(5192)  评论(0编辑  收藏  举报