解决Vite+Vue3打包项目本地运行html白屏和报错问题

已于 2024-09-04 18:17:44 修改
阅读量5.1k 收藏 9
点赞数 11
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： html 前端 vue.js
于 2024-08-27 18:06:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/baoyin0822/article/details/141609137

解决Vite+Vue3打包项目本地运行html白屏和报错问题

一、问题

  • 通过Vite+Vue3创建好且未调用后端接口的项目进行打包后，想在本地直接打开打包好dist文件夹内的index.html文件，发现通过浏览器打开后是空白页面，且控制台报错；
  • 现想打包后，直接通过浏览器访问index.html能正常出现静态网页，且浏览器不报错。

二、解决

1.解决index.html打开后空白的问题

  • 给该项目安装@vitejs/plugin-legacy
npm install @vitejs/plugin-legacy --save
  • 在vite.config.js文件中加入如下配置
import legacy from "@vitejs/plugin-legacy"
...
最低0.47元/天 解锁文章

200万优质内容无限畅学
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 1万+
vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue
vue3 - vite项目打包后访问白屏报错Expected a JavaScript module script but the server responded with a MIME type
高级前端工程师
12-18 8261
vue3，vite，打包build部署报错，页面白屏，vue报错，Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec，关于vite build后访问报错：Expected，vite打包 nginx部署报错，服务器base配置，资源路径
Vue3+vite打包后页面空白问题
IT菜鸟
03-01 7281
项目是放在根目录运行，使用默认配置 import.meta.env.BASE_URL 默认输出 '/'；vite.config.js 增加 base: './'如果项目打包后放在二级目录运行，例如：test/dist。nginx配置（项目放在二级目录时配置nginx）里面的【路由History模式打包页面空白】打包后 index.html。
Vite + Vue 打包后页面空白（奇葩原因）
poocat的博客
06-02 550
Vite 把注释当正文了
vue项目打包后打开index.html一片空白
ai
03-16 1989
首先，我们来解释一下vue脚手架项目启动项目的原理，其实，在你使用 npm run dev或npm run serve的时候，实际是临时创建了一个webpack-dev-server或vue-cli-service serve的node服务器，为了方面后面的 hot-reload（热重载）的需求，必须所有的更新都要在服务上处理后进行更新，如果你是单纯用file协议打开静态网站的方式，是没有办法做到这个处理的，如果可以，也是需要编译和重载的，成本很高昂。http模块是node.js原生模块中最为亮眼的模块。
Webpack打包vue项目后发现index.html为空白
EdgeWorld的博客
05-11 368
之后我发现其中也有history出现，但不能像上面那样直接修改history为hash，而是需要注意到'vue-router'中还有一个函数是‘createWebHashHistory’，将原来代码的‘createWebHistory’函数替换掉，得到。此时再重新运行npm run build，得到的index.html不再是空白。今天在用Webpack打包vue3项目后，发现index.html一直是空白，于是我在网上找到该方法：修改相对路径 “/” -> “./”，
使用vite打包的vue3 ，页面展示为空白
qq_54601164的博客
05-08 1587
vite默认根目录"/"，file://…访问需要基于index.html的路径，需要再vit.config.js中进行以下配置。vite构建打包后，默认启用ES Module，跨module加载引用涉及跨域，file://…问题：通过npm run build 打包后，点击dist文件夹中的index.html时页面一片空白；需要安装vite插件@vitejs/plugin-legacy。安装成功之后在vit.config.js引入并使用。起因：想看一下做的项目的静态版本。
记一次「 Vite打包后使用浏览器打开，显示空白问题」
qq_45735625的博客
05-14 2843
1.问题描述：在使用vite+vue3+Vant做前端页面时，本地运行测试没有问题，输入打包命令打包后直接点击index.html在页面访问空白。2.出现原因：vite 项目打包后预览需要有服务器的支持，直接用浏览器打开是不能访问的。除此之外，vite在package.json 中也有提供预览配置，预览会自动启用服务器。否则上线后可能还是会空白，并在控制台有如下报错信息。(1) 在项目文件夹全局安装serve;否则可能会出现页面空白，并报如下错误；(2) 在打包目录输入运行命令。直接输入运行命令即可。
vite 打包页面空白
hero_th的博客
10-04 8692
根据vite 官网的打包配置教程 这里需要着重强调一点 问题 / 跟 ./ 这两个东西 完全不是用一个路径 Solution 将 vite 里面的配置文件是 vite.config.js 在配置里写上 base: './' 即可解决。
Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）
资深程序员
09-07 1万+
vue3vite怎么支持file协议本地打开，vite打包文件如何支持files协议,支持双击即可打开网页，vue3vite打包后双击本地运行，vue3vite打包后怎么直接在浏览器双击打开访问，vite打包后显示空白，vite如何支持本地file协议打开，vue3vite打包后如何本地查看网站，vue3vite项目打包后本地启动白屏怎么办，vite打包后的代码如何在本地运行，vite+vue3打包在fIle本地index.html打开项目，打包后如何直接打开index.html文件，vue3
详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
qq_44552416的博客
01-17 2556
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
vue3打包后页面空白解决方法
.
01-12 2279
vue3项目打包后页面空白解决方法
vite+vue3打包后index.html出现错误的解决方案
黄钢的博客
06-17 584
这个问题我遇到过很多遍，每次都是间隔很长时间遇到，然后彻底忘记当初是怎么解决的了，直接原地爆炸这次一定得记录下来。
[Vue3]打包好的项目index页面为空白
forggg的博客
04-29 567
解决vue3项目打包后直接打开index页面为空白的情况
解决vite打包后项目出现空白的问题
IM_GOOD的博客
04-02 4484
修改路由模式，我之前是用的History模式，结果有问题，把router中index文件改为Hash模式。因为我写的纯静态，到这里问题就已经能解决了。后面如果要写接口，又出现问题了，那再说吧。这是由于路径的问题，解决方案，vite.config.ts中加上路径都为相对路径。2. 页面还是空白，并且检查元素发现app节点中什么都没有，
Vite + Vue3 + Ts 解决打包生成的index.html页面 显示空白、报资源跨域、找不到资源、404-Page Not Found等错误
热门推荐
沐枫
01-04 2万+
Vite3 + Vue3 + Ts 解决打包生成的index.html页面显示空白、报资源跨域、找不到资源、404-Page Not Found等错误。 在用Vue3 + Ts进行项目开发，通过Vite进行构建打包后，直接在本地以文件系统的方式，用浏览器直接打开dist目录下的index.html文件访问时，浏览器页面显示空白、打开控制台后有报错、应该路径找不到对应的文件。
解决vite打包后项目出现空白的问题(记录一下)
最新发布
Reborn_s的博客
07-03 58
原文链接：https://blog.csdn.net/IM_GOOD/article/details/129908776。修改路由模式，我之前是用的History模式，结果有问题，把router中index文件改为Hash模式。因为我写的纯静态，到这里问题就已经能解决了。后面如果要写接口，又出现问题了，那再说吧。这是由于路径的问题，解决方案，vite.config.ts中加上路径都为相对路径。2. 页面还是空白，并且检查元素发现app节点中什么都没有，
vite打包vue3项目白屏报错
04-29
### Vite 打包 Vue3 项目白屏和报错解决方案 当使用 Vite 构建工具打包 Vue3 项目并部署到生产环境时，可能会遇到页面白屏以及 `Failed to load module script` 的错误。这种问题通常由以下几个原因引起： #### 1. 静态资源路径配置不正确 Vite 默认会将静态资源放置在项目的根目录下，如果未正确设置 `base` 参数，则可能导致浏览器无法找到对应的 JS 和 CSS 文件。 解决方法是在 `vite.config.js` 中配置 `base` 属性[^1]： ```javascript export default { base: '/your-project-path/' // 如果部署在子路径下，请指定该路径；如果是根路径则设为空字符串 '' } ``` #### 2. Nginx 配置不当 Nginx 是常见的 Web 服务器之一，但如果其配置文件未能正确定位静态资源位置，也可能引发此问题。以下是推荐的 Nginx 配置模板[^1]: ```nginx server { listen 80; server_name your-domain.com; root /path/to/your/dist; # 替换为实际构建后的 dist 目录路径 index index.html; location / { try_files $uri /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } ``` 注意：确保 `root` 指向的是通过 `npm run build` 或者 `yarn build` 后生成的 `dist` 文件夹的位置。 #### 3. MIME 类型校验失败 HTML5 对模块脚本有严格的 MIME 类型检查机制。如果服务器返回的内容类型不是预期中的 `application/javascript` 而是其他类型（比如 `text/html`），就会触发此类错误。 确认 Nginx 是否已正确处理 `.js` 文件类型的响应头。可以在 Nginx 配置中加入如下内容来显式声明 MIME 类型[^1]: ```nginx types { application/javascript js mjs; } default_type application/octet-stream; ``` #### 4. 缓存问题 有时旧版本缓存在客户端可能干扰新版本正常加载。可以通过清除浏览器缓存或者强制刷新 (Ctrl+F5) 来验证是否为此类情况所致。 另外也可以考虑给每次发布的静态资产加上哈希值以防止重复命名冲突引起的覆盖现象发生。这一步骤一般无需手动操作，因为 Vite 自动支持基于 Rollup 插件实现这一功能。 --- ### 总结 综上所述，针对 Vite 打包 Vue3 项目过程中可能出现的白屏及报错状况，应重点核查以下方面： - **静态资源配置**：调整 `vite.config.js` 中的 `base` 值； - **Web Server 设置**：优化 Nginx 配置使其适配前端 SPA 应用需求； - **MIME Type 处理**：保障服务端对于 JavaScript 文件返回恰当 Content-Type Header； - **Cache Management**：适当管理本地存储数据以防陈旧副本影响体验效果。 以上措施能够有效缓解乃至彻底消除所描述的技术难题。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值