vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！

已于 2024-09-12 16:47:34 修改
阅读量6.8k 收藏 7
点赞数 9
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： vue3 vite 后端接口cors跨域报错 图片图像无法加载显示 index.html打不开白屏 部署到线上打开报错解决 控制台全是资源路径找不到报错
于 2024-05-30 09:40:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/139311144
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
354 篇文章 2460 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
133 篇文章 158 订阅 ¥9.90 ¥99.00
订阅专栏
本文详细解析了Vite+Vue3项目打包后遇到的问题，如本地和线上打开index.html白屏、资源路径错误、CORS跨域、图片不显示等，并提供了具体的解决方案，包括修改vite.config.ts的静态资源路径、使用HTTP服务器本地浏览、调整路由模式以及服务器配置修改。
摘要由CSDN通过智能技术生成

问题说明

在vite+vue3项目中，执行build打包后生成index.html文件，【本地打开】或【线上服务器部署后】，页面空白且浏览器控制台很多报错，vue3使用vite进行打包构建后，在本地以file文件系统的方式，浏览器直接打开打包生成后的dist目录下的index.html文件访问，浏览器页面整页空白不显示且打开控制台后有报错，该路径找不到对应的文件。项目网页部署到服务器线上后，依然存在此问题，高效解决方案。

其他教程都无法解决，本文提供的解决方案完美搞定此问题。

在这里插入图片描述

解决教程

首先，这个问题

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
Vue3 - 完美解决 vite 打包后在本地浏览器直接打开运行，build 打包后双击 index.html 直接以 file 协议运行网站（资源、接口等正常访问，和部署到服务器运行效果一样）
热门推荐
王佳斌
09-07 1万+
vue3 vite怎么支持file协议本地打开，vite打包文件如何支持files协议,支持双击即可打开网页，vue3 vite打包后双击本地运行，vue3 vite打包后怎么直接在浏览器双击打开访问，vite打包后显示空白，vite如何支持本地file协议打开，vue3 vite打包后如何本地查看网站，vue3 vite项目打包后本地启动白屏怎么办，vite打包后的代码如何在本地运行，vite+vue3 打包在fIle本地index.html打开项目，打包后如何直接打开index.html文件，vue3
记~Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 搭建项目基本框架
小白小白从不日别的博客
06-02 460
在style下创建scss相关的文件如下图主要看index.less里面的内容// 存放项目统一规范的变量// 自定义的 css 样式// 自定义主题样式// 修改 element-ui 样式修改入门的文件main.ts到这里一个基本的 基于 Vite+Vue3+TypeScript + ESlint + CommitLint + Prettier + StyleLin + Element-plus 的项目框架就搭建完成了。
vue打包后显示空白正确处理方法
11-30
在项目中很多时候需要用到vue打包成html不需要放在服务器上就能浏览。根据官网打包出来的html直接打开是显示空白。 vue打包后显示空白正确处理方法是 1、找到配置文件 修改 这样打包处理可以打开但是页面样式会找不到 2、修改 找到对应的位置加上publicPath: '../../' 然后就成功了！ 很多朋友还遇到这样的问题 vue打包后index文件一片空白，怎么回事呢？  vue项目你npm run build打包后，点开index文件打开一片空白， 并报错解决方法：路径问题， 总结 以上所述是小编给大家介绍的vue打包后显示空白正确处理方法，希望对大家有所帮助，如果大家有任
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
10-16
主要介绍了解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3 + Vite 老版本浏览器白屏兼容问题
最新发布
HongSH945的博客
10-15 1015
该文章记录了打包 vue 项目时，出现白屏以及对应的解决方案
vue3项目，本地页面正常显示，打包后页面空白
lth002的博客
09-11 839
通过浏览器的页面元素选择定位到问题是因为路由没有正确加载，但是排查了路由文件，入口文件，vite.config.js文件，都没有发现任何问题，直到将路由文件里面的按需加载页面文件改成直接加载，才正确渲染出了页面，才发现按需加载写错了。
npm run build打包界面空白报错
shaleilei的博客
01-25 4345
这个问题本身是因为路径的问题，解决方法有两个： 一、通过服务来请求，不知道你们有没有用过live-server ，知道的人不多，但是很好用，下面是他的使用方法 先全局安装   npm install -g live-server    安装好以后   在你的项目根目录上执行   npm  live-server, 最后你会发现你的项目跑起来了，界面是自动打开的，live-server 就是
Vite项目打包后打开html后页面空白并报错Access to script at ‘file:///G:/ceshi/%E8%A3%85%E5%A4%87/charts-vue/Ec
qq_57229245的博客
03-13 2965
注释掉这些预加载标签并不会影响页面展示和功能的使用，因为这些模块资源仍然可以通过其他方式被加载和使用，比如通过 JavaScript 动态加载或者在其他地方引入。页面的展示和功能依赖于模块资源的正确加载和执行，而不一定依赖于预加载标签的存在。也就是说vite 默认使用 ES Module 模块是不支持file协议的，所以需要使用插件来进行配置，才可以正常使用file协议打开。标签的作用是为了告诉浏览器在解析 HTML 和执行 JavaScript 之前预加载指定的模块资源，以提高页面加载速度和性能。
Vue3+vite打包后页面空白问题
05-16 2534
二、vue3 vite打包后页面白屏控制台报错Access to script at 'file:///E:/vueProject/vue3-project/Vue3-big-event-admin/dist。1 安装兼容插件 @vitejs/plugin-legacy。原因：资源路劲问题修改：vite.config.ts。在vite.config.ts 中进行配置。然后到 dist目录下在cmd 中运行。想要查看，可以安装一个本地服务器插件。四、nginx.conf。
使用vite打包的vue3 ，页面展示为空白
qq_54601164的博客
05-08 1257
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 +vue3 打包的 HTML 文件报错跨域 from origin ‘null‘ has been blocked by CORS policy
qq1014156094的博客
01-15 7226
原因 vite 是直接使用原生 ES6 模块打包的，然而 ES6 模块遵循同源策略，加上 script 本来就会跨域和 file 协议不支持跨域，所以不能直接通过 file 协议直接打开，除非使用 http(s) 等支持跨域的协议。 解决办法1 启动一个本地服务器，npm 安装 http-server 包，或着 VSCode 安装 Live Server 拓展等办法都可以。 解决办法2 暂时禁用浏览器的同源策略。 ............
vue3+vite跨域问题
好好学习，天天向上
06-18 1122
vue3+vite跨域问题、vite.config.js
Vue3配置vite.config.js代理解决跨域问题
共同学习，共同成长
08-13 708
当浏览器发出一个请求时，只要请求URL的协议、域名、端口三者之间任意一个与当前页面URL不同，就称为跨域。跨域一般出现在开发阶段,由于线上环境前端代码被打包成了静态资源,因而不会出现跨域问题,这篇文章主要给大家介绍了关于Vue3配置vite.config.js解决跨域问题的相关资料
vue项目打包之后index.html页面没有显示内容
学习记录
09-10 6133
  Tip: built files are meant to be served over an HTTP server.   Opening index.html over file:// won 解决：更改config/index.js 中的参数 assetsPublicPath:'./',
Vite打包后直接使用浏览器打开，显示空白问题
change_fate的博客
04-13 4597
1.需求：安卓webview等浏览器直接打开文件显示2.原因（1）资源路径错误：vite.config.js 配置 base: “./” （在webpack中则配置publicPath: "./"即可）(2) 跨域错误script不支持file://协议跨域， 主要是因为esModule问题。
解决Vite+Vue3打包项目本地运行html白屏和报错问题
BreenCL的博客
08-27 2111
解决Vite+Vue3打包项目本地运行html白屏和报错问题
vue3+vite打包后白屏
09-01
当你使用vue3和vite进行打包后，如果在服务器上打开页面时出现空白的情况，这可能是由于文件路径引发的404错误导致的。 初步分析，可能是你的打包文件中的资源文件（例如js和css文件）的引用路径不正确，导致服务器无法找到这些文件而出现404错误。 解决这个问题的方法之一是检查你的打包配置，确保资源文件的引用路径是正确的。你可以尝试修改vite的配置文件，特别是关于打包路径的配置，确保所有的资源文件都能被正确地加载。另外，还可以检查你的index.html文件，确保引用的资源文件路径与打包后的文件路径一致。 此外，还有一种可能是你的打包文件中存在其他问题，例如代码错误或依赖缺失，导致页面无法正确渲染。你可以使用浏览器的开发者工具控制台，查看是否有其他报错信息，以便更好地定位问题。 如果问题仍然存在，建议你查看具体的错误信息、文件路径以及打包配置，以便更好地分析和解决问题。如果需要进一步帮助，请提供更多详细的信息，例如打包配置和错误信息，以便我们更好地帮助你解决问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3用vite打包上服务器后报错显示页面空白](https://blog.csdn.net/k490031/article/details/129733118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [“Vue3+Vite打包后，白屏沉默，重启重试无果，我该如何解决？”](https://blog.csdn.net/weixin_44637104/article/details/131342307)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [浏览器显示数据库中数据的条形图柱状图 前后端分离vue.js+spring boot 计算机软件工程课程设计毕业设计 ...](https://download.csdn.net/download/Amzmks/88275824)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值