使用vite打包的vue3 ,页面展示为空白
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
起因:想看一下做的项目的静态版本
问题:通过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 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)