Vue打包后通过springboot运行页面为空白页的解决方法

已于 2022-07-27 17:29:37 修改
阅读量3k 收藏 2
点赞数 4
文章标签： vue.js spring boot 前端 java
于 2022-01-19 21:27:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46642210/article/details/122590088
版权

第一种可能是index.html里面js和css引用的路径问题，在index,html里面的css和js引用处 /前面加上/dist或者. 就可以了。记得每一个都要加。

第二种可能是路由使用了history模式，在没有后端配合配置的情况下就会出现空白的情况。把vue路由中的index.js使用history那行注释掉就可以了。默认是hash模式。

遇到TypeError: Cannot read property 'protocol' of undefined错误的应该是vue中使用axios的方法错误vue.use(axios)，改为Vue.prototype.axios=axios，然后重新build就可以了

远航帆
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目部署在Spring Boot出现页面空白问题的解决方案
10-17
主要介绍了Vue项目部署在Spring Boot出现页面空白问题的解决方案,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Spring Boot Vue前后端分离开发实战.pdf
04-21
Spring Boot Vue前后端分离开发实战.pdf 上手简单，文档讲述清晰，实在好用。
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通
【vue项目部署】vue路由在多级页面下，页面刷新空白（history模式下）的排查过程&问题解决
记录
01-03 1087
在项目打包部署后，出现了多级目录刷新后白屏的问题。记录一下排查过程与解决方法。
前后端整合vue+springBoot+gateway。解决vue打包之后放到springBoot的static文件夹无法访问，gateway转发静态资源文件的失败的问题
xal
09-19 1927
当然不会，它那么多模块它怎么会知道访问哪个的static，这个时候我们就需要使用gateway的断言指定一个模块的static是作为静态文件夹。如果是vue打包文件，因为打包生成的是index.html,我们知道index文件是可以省略不写的，那么他的访问路径就是 http://localhost:8080。如下方结构：我们想访问a.txt文件，假设启动端口为8080，那么访问路径就是 http://localhost:8080/a.txt。我们只需要作为静态资源文件的模块，注意一定要是这个模块。
springboot启动成功，但返回的是空白页
m0_61779675的博客
09-27 805
spring boot返回空白页
SpringBootDemo项目浏览器访问出现空白页面
newbey的博客
05-17 451
原因之一： 项目目录结构问题： 启动类应置于controller等外层目录
springboot如何使用vue打包过的页面资源
08-25
主要介绍了springboot如何使用vue打包过的页面资源,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
解决vue 打包发布去#和页面空白的问题
10-18
今天小编就为大家分享一篇解决vue 打包发布去#和页面空白的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目打包后首页一片空白解决办法和具体原因总结
热门推荐
吹过麦田的风的专栏
08-20 3万+
很高兴在万千文章中你看到本章，希望能为你解决问题！！！ 在最初用vue+webpack+vue-router做项目的时候，在本地pc开发测试都是正常的，但是在把代码打包部署到测试服务器之后，访问项目首页总是白屏。 第一种，打包后的dist目录下的文件引用路径不对，会因找不到文件而报错导致白屏。 解决办法：修改一下config下面的index.js中bulid模块导出的路径。因为index.h...
vue打包之后出现空白页的原因以及解决方式
温情
04-02 3万+
路由模式 history 新建项目什么都不动，路由模式：history, 直接npm run build打包 打包之后，直接打开dist文件里面的ndex.html可以看到页面是空白的，控制台是这样的。 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的，应该用'./'而不是'/' 那怎么修改打包之后的路径呢？查看vue-cli官网配置参考中的publicPath 我们只需要在和package.json同级的地方新增一个vue.config.js文
vue项目打包后页面出现空白
qq_24882601的博客
05-23 1万+
相信很多刚刚接触vue的伙伴会遇到这样的问题，就是说vue项目在开发环境下一切正常，但是打包之后，打开index.html页面却是一片空白，打开控制台发现这样的错误 出现这种情况要分两个处理方式（vue-cli2和vue-cli3），先说vue-cli2； 首先找到config/index.js文件，将assetPublicPath的路径改为“./”即可， vue-cli3...
最快捷的两种方案彻底解决：vue打包后dist目录下的index.html网页显示空白的问题
在写作的路上持续输出。
03-27 1万+
📢：解决vue 打包后dist 目录下index.html 页面空白的问题。两种方案快速解决......
SpringBoot项目启动成功但接口访问404
xiaobai178的博客
06-16 8329
如果你想同时扫描指定路径和当前模块下的组件，可以使用多个@ComponentScan注解来指定多个扫描路径，或者将两个模块的组件都放在同一个扫描路径下。如果在启动类中指定了扫描路径为另一个模块，那么默认情况下，Spring Boot将只会扫描指定路径下的组件，并不会自动扫描当前模块下的组件。检查服务器部署路径：如果您将应用程序部署到服务器上，请确保将项目正确部署到服务器的Web容器中，并且部署路径与您在请求中使用的路径匹配。检查依赖版本：检查子模块的依赖版本是否与父模块和其他模块中的依赖版本兼容。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
最新发布
小易不止于搬砖的博客
05-17 672
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue项目打包后页面空白
06-06
可能有多种原因导致打包后页面空白，以下是一些常见的解决方法： 1. 检查浏览器控制台是否有报错信息，如果有的话，根据报错信息进行排查。 2. 确认打包后的文件路径是否正确，特别是 index.html、JS 和 CSS 文件的引用路径是否正确。 3. 检查是否有未添加到依赖中的第三方库或插件，可能会导致打包后页面空白。 4. 确认是否正确设置了路由和组件，打包后的路由路径和组件名是否匹配。 5. 使用 Vue Devtools 插件进行调试，查看组件的状态和数据是否正常。 6. 尝试使用命令行工具运行打包后的文件，查看是否有报错信息，如果有的话，根据报错信息进行排查。 希望这些方法能对你解决问题有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值