vite打包，tomcat访问index为空白页面

已于 2022-04-02 18:09:58 修改
阅读量1.7k 收藏 3
点赞数 1
文章标签： html5 spring tomcat
于 2022-03-31 20:56:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37733303/article/details/123882157
版权
在将Vite打包的项目部署到Tomcat服务器时，遇到了白屏现象。通过调整Vite配置，将资源路径改为相对路径，尝试将静态资源和页面分离，但初次尝试未成功。经过检查，发现资源放置位置不正确，静态资源应位于`static`目录，页面位于`WEB-INF`目录。纠正资源位置后，成功解决了白屏问题，页面正常显示。
摘要由CSDN通过智能技术生成

现象： 将vite打包后的dist里面的文件放在tomcat服务器下边运行,结果白屏

在这里插入图片描述
找到vite官网,base参数默认是/,这是绝对路径，将其改成相对路径./
,在这里插入图片描述
在这里插入图片描述
base与plugins同级，不要放到server里，┮﹏┭
再来一次
在这里插入图片描述
结果还是白屏，F12查看控制台，看来是资源没有放对位置
我用的springboot，静态资源默认放在static

最低0.47元/天 解锁文章
背锅的蜗牛
关注
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 6699
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 打包后在本地浏览器直接打开运行，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打包后使用浏览器打开，显示空白问题」
qq_45735625的博客
05-14 1749
1.问题描述：在使用vite+vue3+Vant做前端页面时，本地运行测试没有问题，输入打包命令打包后直接点击index.html在页面访问空白。2.出现原因：vite 项目打包后预览需要有服务器的支持，直接用浏览器打开是不能访问的。除此之外，vite在package.json 中也有提供预览配置，预览会自动启用服务器。否则上线后可能还是会空白，并在控制台有如下报错信息。(1) 在项目文件夹全局安装serve;否则可能会出现页面空白，并报如下错误；(2) 在打包目录输入运行命令。直接输入运行命令即可。
React布署打包到服务器上后，页面显示空白
最新发布
u011714807的博客
08-22 407
react项目路由用的是BrowserRouter，部署打包到服务器后打开报错或显示空白，可以参考以下解决问题方法。
vite 打包页面空白
hero_th的博客
10-04 8593
根据vite 官网的打包配置教程 这里需要着重强调一点 问题 / 跟 ./ 这两个东西 完全不是用一个路径 Solution 将 vite 里面的配置文件是 vite.config.js 在配置里写上 base: './' 即可解决。
Vue3+vite打包后页面空白问题
05-16 2481
二、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打包静态文件打开显示空白
A_bet_of_three_years的博客
01-31 6554
vue3+vite进行打包生成的文件访问显示空白
vue3+vite+移动端webview打包后页面加载空白问题解决办法
云加速
07-13 678
在使用Vue3、Vite以及移动端Webview进行开发时，打包后页面加载出现空白的问题可能是由于多种原因造成的。通过上述方法，你可以尝试解决Vue3、Vite以及移动端Webview打包后页面加载空白的问题。确保Webview的配置正确，没有阻止JavaScript的执行或资源的加载。属性，以正确设置基础路径，使得构建后的资源能够从正确的相对路径加载。如果资源是从不同的域加载的，确保服务器配置了正确的CORS策略。确保打包后的资源文件没有损坏，并且所有依赖都已正确加载。在所有环境中都是可用的。
Vue下路由History模式打包后页面空白的解决方法
08-27
Vue下路由History模式打包后页面空白的解决方法 在 Vue 项目中，默认的路由模式是 Hash 模式，但是这种模式会带来一些问题，如 URL 中的 "#" 符号不美观，微信分享、授权登录等功能也会出现一些问题。 History 模式...
vue打包后显示空白正确处理方法
08-28
然而，有时在执行 `npm run build` 命令进行打包后，可能会遇到浏览器中显示空白页的问题。这个问题通常是由于多种原因导致的，包括路径错误、公共路径配置不正确、资源加载失败等。以下是一些解决 Vue 打包后显示...
java web 项目在tomcat上显示空白页的解决
热门推荐
bcbobo21cn的专栏
09-08 4万+
今天调试一java web项目，所有页面都显示空白，有如下的解决过程； 一 切换浏览器模式 tomcat打开页面是空白 用localhost:8080打开页面显示空白，以前用着没问题。 浏览器兼容性问题，如果是IE7以上，可以按F12调出浏览器调试工具，在浏览器模式以及文档模式选项卡切换浏览器浏览模式，应该可以恢复你原来的页面 把tomcat中的项目删除掉，还有tomcat下的
使用vite打包的vue3 ，页面展示为空白
qq_54601164的博客
05-08 1239
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引入并使用。起因：想看一下做的项目的静态版本。
项目部署到tomcat后访问显示空白页
你究竟是想一辈子卖糖水，还是希望获得改变世界的机会？
05-05 9339
在五一放假前，项目在tomcat上还是正常运行好好的，但是昨天放假来了需要把项目更新。平时都是按照更新步骤来的，没有任何问题，但是昨天更新上去，访问项目时候应该跳转到登录页面，但是它一直显示空白。直接去访问webcontent下面的error.jsp也是显示空白。如果随便输入一个a.jsp就会出现404错误，这说明项目是正确部署上去了，但是访问项目时候就是访问不到，一直显示空白。一直以为是新打包的w
vite 打包后 空白页问题解决
qq_43806488的博客
02-13 1707
vite 打包
react 打包后页面空白_Webpack 打包太慢？来试试 Bundleless
weixin_39538687的博客
11-29 262
阿里妹导读：Webpack 将各个资源打包整合在一起形成 bundle，当资源越来越多时，打包的过程也将越来越慢。如果我们不需要打包呢？让浏览器直接加载对应的资源，是否就可以实现质的提升？本文分享基于浏览器的 ESModule 能力实现 Bundless 本地开发的相关思路、核心技术点和 Vite 的相关实现，以及在阿里供应链 POS 场景下的落地实践。文末福利：前端开发学习路线。一 ...
tomcat部署项目成功后，访问任何页面都是空白页，不报404异常
WEILIU511的博客
06-03 2661
tomcat部署项目成功后，访问任何页面都是空白页，不报404异常 项目部署成功： 页面空白： 输入一个错误的地址，也是空白： 原因是设置的CharchaterFilterr过滤器是全局筛选： @WebFilter("/*") public class CharchaterFilter implements Filter 不小心删掉了代码：filterChain.doFilter(req,rep); //filterChain.doFilter(request,response); 导致拦截后未放行，
react打包后html打开一片空白,02-react随记-在yarn build打包后,打开网页显示为空白的解决方案...
weixin_42521032的博客
07-02 1395
react在yarn build打包后,打开网页显示为空白的解决方案创建react项目create-react-app my-appcd my-appnpm start构建完这个初始的项目之后,发现项目是可以正常访问的!接着就是发布上线yarn build控制台中显示The project was built assuming it is hosted at /.You can control t...
Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、资源跨域、找不到资源、404-Page Not Found等错误；关于vite build后访问报错
qq_44535402的博客
07-20 1万+
关于Vite打包后本地访问打包文件空白页面 ；关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “
vite打包后页面空白
04-30
出现页面空白的情况可能会有多种原因，以下是一些常见的解决方法： 1. 确认是否正确配置了 Vite 的构建选项，如 publicPath、base、assetsDir 等。 2. 检查是否存在语法错误或者其他代码问题，可以使用开发者工具...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值