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

最新推荐文章于 2024-09-11 16:05:00 发布
最新推荐文章于 2024-09-11 16:05:00 发布
阅读量4.7k 收藏 12
点赞数 5
文章标签： 前端 html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ct130429/article/details/129956959
版权

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

解决方法：1.在我们vite.config.js文件中检查是否有路径的指向

                     

                2.查看我们的路由模式，将路由模式修改为createWebHashHistory

                 

                         

                

总结：vite的特点: 快速的冷启动,不需要等待打包 即时的热模块更新 真正的按需编译,不用等待整个项目编译完成.

 

 

陈漂亮 同学
关注
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 6610
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本地打包后index空白页
qzh88888888的博客
10-07 626
1.安装@vitejs/plugin-legacy 并引入。2.配置base build。
vue3项目，本地页面正常显示，打包后页面空白
最新发布
lth002的博客
09-11 767
通过浏览器的页面元素选择定位到问题是因为路由没有正确加载，但是排查了路由文件，入口文件，vite.config.js文件，都没有发现任何问题，直到将路由文件里面的按需加载页面文件改成直接加载，才正确渲染出了页面，才发现按需加载写错了。
Vue3+vite打包后页面空白问题
05-16 2442
二、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 1220
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引入并使用。起因：想看一下做的项目的静态版本。
Vue3+Vite打包后上传服务器页面空白问题的解决
u010548345的博客
04-21 1160
经过排查发现，页面空白原因是因为所需的打包后的js和css文件的路径不对，可以通过在项目根目录下的的vue.config.js里增加一个“base”字段，配置成服务器访问的路径即可；
解决vue3项目打包发布到服务器后访问页面显示空白问题
m0_59006402的博客
12-01 2967
2.router里面的路由模式改为 createWebHashHistory。env.VITE_PUBLIC_PATH 的值如下。1.在 vite.config.ts 文件中 加入。
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
在开发Vue应用并将其部署到Spring Boot环境中时，可能会遇到页面加载空白的问题。这通常是由于文件路径配置不正确，导致CSS、JavaScript等静态资源无法被正确加载。在本篇文章中，我们将深入探讨这个问题，并提供一...
vue打包后显示空白正确处理方法
08-28
总的来说，解决 Vue 打包后显示空白页的问题需要细心排查，从项目配置到浏览器端的错误信息，每一步都可能成为关键。记住，每个项目的具体情况可能会有所不同，所以不要怕花时间去分析和调试。同时，保持项目结构...
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue下路由History模式打包后页面空白的解决方法
12-09
Vue.js 是一款流行的前端框架，它的路由管理器 ...总之，Vue Router 的 History 模式提供了更佳的 URL 体验，但部署时需要对服务器进行适当的配置，以避免页面空白的问题。理解这一点对于开发和维护 Vue 应用至关重要。
vue3项目部署到服务器，页面显示空白页
challenglistic的博客
08-17 3252
vue3项目部署到服务器，页面显示空白页
vue3打包后打开页面部分空白如何解决？
qq_20604185的博客
05-17 5926
我个人的原因是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+Vite】解决build后空白页的问题
提笔忘字的帝国
11-27 1130
build后空白页的问题可能是使用的是历史模式，因为Vue是一个单页的客户端应用，如果没有适当的服务器配置，访问会得到一个 404 错误。使用Hash模式接口解决这个问题，因为使用Hash模式后由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。缺点就是对SEO不友好。
Vue3打包发布后，页面运行起来空白
cwhzm的博客
07-10 1921
1、npm run build 后 把dist 文件夹中的文件传到 云服务，跑起来是空白的。
Vue3 + Vite 页面白屏问题（开发环境+生产环境）
Yana's Blog
05-06 8716
在一次开发过程中，使用 Vue3 + Vite 做了几个简单页面，支持 PC 端和手机端， PC 端测试一切安好，手机端访问本地 IP 进行预览，苹果手机功能正常，但安卓手机直接白屏。
vue 3 vite npm run build 空白页
thankseveryday的专栏
05-27 976
解决 Vue 3 build 后访问页面空白问题
vite vue3 项目打包
09-05
要将Vite Vue3项目进行打包，可以按照以下步骤进行操作： 1. 在终端中进入到你的项目目录。 2. 运行以下命令安装相关的依赖： ``` npm install ``` 3. 执行以下命令来进行项目的打包： ``` npm run build ``` 4. 打包完成后，Vite会在你的项目根目录下生成一个`dist`文件夹，其中包含了打包后的文件。 现在你的Vite Vue3项目已经成功打包完成！你可以将`dist`文件夹中的内容部署到服务器或者其他需要的地方。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值