Vue3+Vite打包后上传服务器页面空白问题的解决

最新推荐文章于 2024-09-07 08:49:21 发布

u010548345

最新推荐文章于 2024-09-07 08:49:21 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端 npm

本文链接：https://blog.csdn.net/u010548345/article/details/130282093

版权

文章讲述了在遇到页面空白问题时，问题根源在于打包后的js和css文件路径不正确。解决方案是在项目根目录的vue.config.js中添加base配置，设定为服务器访问的路径，从而修正文件引用路径，解决页面加载问题。

摘要由CSDN通过智能技术生成

经过排查发现，页面空白原因是因为所需的打包后的js和css文件的路径不对，可以通过在项目根目录下的的vue.config.js里增加一个“base”字段，配置成服务器访问的路径即可；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

u010548345

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

高级前端工程师

05-30

6636

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

vite3+vue3 项目打包优化

前端知识分享喵

05-16

2199

现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。

参与评论您还未登录，请先登录后发表或查看评论

vue3+vite本地打包后index空白页

qzh88888888的博客

10-07

629

1.安装@vitejs/plugin-legacy 并引入。2.配置base build。

Vue3+vite打包后页面空白问题

05-16

2456

二、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。

【踩坑】Vue3项目正常跑动后页面空白问题

最新发布

Vivien_CC的博客

09-07

974

近期踩了个坑，Vue3搭建的项目能够正常跑动，但是页面却是空白的，控制台也不报错，只留下一行警告：发现是 router 入口文件（一般是在 router 文件夹下的 index 里面）的写法和 vite 版本不匹配的问题。随着 Vite 版本的更新，一些 API 可能会发生变化或被弃用，这会导致在升级 Vite 或项目迁移时遇到兼容性问题。我遇到的问题正是因为 Vite 的版本更新导致了 import.meta.globEager 的使用方式变化。

vite vue3项目打包部署空白页面问题的处理

Ct130429的博客

04-04

4710

vite vue3项目打包部署上线后，发现是空白页面问题的处理

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

qq_54601164的博客

05-08

1225

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引入并使用。起因：想看一下做的项目的静态版本。

Vue下路由History模式打包后页面空白的解决方法

12-09

Vue.js 是一款流行的前端框架，它的路由管理器 ...总之，Vue Router 的 History 模式提供了更佳的 URL 体验，但部署时需要对服务器进行适当的配置，以避免页面空白的问题。理解这一点对于开发和维护 Vue 应用至关重要。

Vue3+Ts+Vite+History模式，部署在三级目录下

weixin_39964419的博客

02-05

675

Vue3+Ts+Vite+History模式，项目打包后部署到Nginx三级目录下，并且经过一次Nginx转发。项目打包部署后，页面访问空白

vue打包后显示空白正确处理方法

08-28

总的来说，解决 Vue 打包后显示空白页的问题需要细心排查，从项目配置到浏览器端的错误信息，每一步都可能成为关键。记住，每个项目的具体情况可能会有所不同，所以不要怕花时间去分析和调试。同时，保持项目结构...

vue3+vite+移动端webview打包后页面加载空白问题

weixin_69890748的博客

04-22

1416

vue3+vite+移动端webview打包后页面加载空白问题

vue3打包后打开页面部分空白如何解决？

qq_20604185的博客

05-17

5928

我个人的原因是router的history模式引起的。做以下几点，问题解决。 1.修改vue.config.js const { defineConfig } = require('@vue/cli-service') //const path = require("path"); //const resolve = function(dir) { // return path.join(__dirname, dir); //}; module.exports = defineConfig({

解决vue3项目打包发布到服务器后访问页面显示空白问题

m0_59006402的博客

12-01

2977

2.router里面的路由模式改为 createWebHashHistory。env.VITE_PUBLIC_PATH 的值如下。1.在 vite.config.ts 文件中加入。

【Vue3+Vite】解决build后空白页的问题

提笔忘字的帝国

11-27

1132

build后空白页的问题可能是使用的是历史模式，因为Vue是一个单页的客户端应用，如果没有适当的服务器配置，访问会得到一个 404 错误。使用Hash模式接口解决这个问题，因为使用Hash模式后由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。缺点就是对SEO不友好。

vue项目打包后打开空白解决办法

热门推荐

王永存

09-22

4万+

vue+webpack+HBulider打包后手机上一片空白解决办法网上很多说自己的VUE项目通过Webpack打包生成的list文件，放到HBulider打包后，通过手机打开一片空白。这个主要原因是路径的问题。 1、记得改一下config下面的index.js中bulid模块导出的路径。因为index.html里边的内容都是通过script标签引入的，而你的路径不对，打开肯定是空白的。先看

vue3用vite打包上服务器后报错显示页面空白

k490031的博客

03-23

1309

vue3用vite打包上服务器后报错显示页面空白

Vue3 + Vite 页面白屏问题（开发环境+生产环境）

Yana's Blog

05-06

8732

在一次开发过程中，使用 Vue3 + Vite 做了几个简单页面，支持 PC 端和手机端， PC 端测试一切安好，手机端访问本地 IP 进行预览，苹果手机功能正常，但安卓手机直接白屏。

vue3+vite打包后白屏

09-01

当你使用vue3和vite进行打包后，如果在服务器上打开页面时出现空白的情况，这可能是由于文件路径引发的404错误导致的。初步分析，可能是你的打包文件中的资源文件（例如js和css文件）的引用路径不正确，导致服务器无法找到这些文件而出现404错误。解决这个问题的方法之一是检查你的打包配置，确保资源文件的引用路径是正确的。你可以尝试修改vite的配置文件，特别是关于打包路径的配置，确保所有的资源文件都能被正确地加载。另外，还可以检查你的index.html文件，确保引用的资源文件路径与打包后的文件路径一致。此外，还有一种可能是你的打包文件中存在其他问题，例如代码错误或依赖缺失，导致页面无法正确渲染。你可以使用浏览器的开发者工具控制台，查看是否有其他报错信息，以便更好地定位问题。如果问题仍然存在，建议你查看具体的错误信息、文件路径以及打包配置，以便更好地分析和解决问题。如果需要进一步帮助，请提供更多详细的信息，例如打包配置和错误信息，以便我们更好地帮助你解决问题。123 #### 引用[.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 ]