使用vite打包的vue3 ，页面展示为空白

起因：想看一下做的项目的静态版本

问题：通过npm run build 打包后，点击dist文件夹中的index.html时页面一片空白；

解决方案：

1、文件路径不对

vite默认根目录"/"，file://…访问需要基于index.html的路径，需要再vit.config.js中进行以下配置

2、跨域问题

vite构建打包后，默认启用ES Module，跨module加载引用涉及跨域，file://…没有跨域的定义
需要安装vite插件@vitejs/plugin-legacy

npm i @vitejs/plugin-legacy -D

安装成功之后在vit.config.js引入并使用

文章借鉴：vue3+vite+ts项目打包后打开dist文件夹中的index.html时页面一片空白_vite 构建的项目打包dist文件 打开index.html 空白 无法静态访问-CSDN博客