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

问题:通过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博客

GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079 [skip ci] 3 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐