vue+springboot部署后刷新页面报404找不到路径

最新推荐文章于 2024-04-22 19:25:22 发布
最新推荐文章于 2024-04-22 19:25:22 发布
阅读量2k 收藏 3
点赞数 2
分类专栏： vue 文章标签： vue.js spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jay_Chou345/article/details/109962500
版权

vue+springboot项目刷新页面报404

vue打包后每次刷新页面都会报404，就很烦，
是因为路由模式的问题，只需要将路由模式改为history，然后在vue的router的index.js文件中加入以下代码即可

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

添加代码后刷新后就不会报错了

Jay_Chou345
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue打包项目后刷新404的问题
11-26
vue打包项目后刷新404的问题Nginx配置 server { listen 80; server_name localhost; index index.html; root /root/dist; location / { root /root/dist; try_files $uri $uri/ /index.html =404; } } 以上这篇解决vue打包项目后刷新404的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue+springboot网页商城项目
06-12
5个github上的vue+springboot商城项目，内涵不同的操作页面，风格各一。下载前提是懂vue和springboot哦，不然环境都搭不好就很尴尬啦~
SpringBoot报404异常几种解决方法
最新发布
m0_71580648的博客
04-22 1466
404 not found，是HTTP对网页错误情况返回的一种状态码，当用户在浏览器中输入网址时，服务器会根据输入的地址判断是否有对应的网页信息，如果没有对应信息，说明用户输入的可能是一串无效的链接，服务器就会向用户返回404 not found状态码，告诉用户没有找到对应的网页信息。第三条就是我碰到的前端请求报404 not find，但是url都正确，路径添加正确情况下。2、在@restcontroller或@controller后面添加窄化路径；3、pom文件中未添加web依赖，如下。
Vue3 vue-router刷新获取不到路由路径
yu3278326的博客
07-29 5384
今天修改写页面的时候发现一个Bug，底部导航栏默认是在首页，在其他页面进行刷新的时候，导航栏active又回回到首页，这样体验很不好 环境 "vue-router": "^4.0.10", "vue": "^3.0.5", "vant": "^3.1.5", <!-- template --> <router-view /> <van-tabbar v-model="navActive" active-color="#e4313
vue刷新页面丢失404
BLUESKYHOST的博客
12-18 383
解决方案 nginx添加配置文件 下面内容加入配置文件 location @rewrites { rewrite ^(.+)$ /index.html last; } 完整配置 location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ @rewrites; } location
关于vue history 模式下刷新页面路径404 或跳转到主页问题的解决思路
MoonLight20100的专栏
04-21 2299
闲言少叙，直奔主题了，使用过vue 的都有这么问题，开发时候一直爽，一上生产就懵逼，测试环境和生产是不一样的，注定了，在生产环境下vue 的路径是无法保存的 解决思路1 千篇一律的nginx找不到路径回首页，搜到了吧，一定搜得到，但是实在无法接受 我的解题思路如下： vue 不是找不到路径么 那么我把路径改为参数不就可以了？ nginx需要一定基础了 这里必须用反向代理 正向的会直接...
Vue + Spring Boot History模式 打包后 刷新404问题
bestone_1987的专栏
04-14 3979
此次主要是vue项目打包后，放在spring-boot后端，整合一起打包。访问页面，刷新出现404的情况。此处不用纠结是否真的前后端分离的情况 一、修改history模式 修改router\index.js，加入mode: 'history这句话。整体代码如下： Vue.use(Router) const VueRouterPush = Router.prototype...
vue项目打包部署到springboot后二级页面刷和访问新变成404问题
weixin_43190355的博客
10-16 1298
vue-cli3项目打包后部署到springboot，发现二级页面间无法跳转，同时直接输入二级页面的地址也无法访问子页面（报404），搜索很多后说是引用资源路径的问题。但是自己仍然没有解决。 https://blog.csdn.net/qq_41618510/article/details/99679916看到这篇文章后想起自己将路由模式设置为history，便恢复相关配置，取消history，并...
vue history模式打包后，把dist文件放入springboot中resouser下，刷新页面报404
qq_34169240的博客
03-19 1867
原文链接：https://blog.csdn.net/ChOLg/article/details/103749007 问题 vue history模式打包后，把dist文件放入springboot中resouser/static下，刷新页面报404。 问题原因 正常情况下我们刷新页面，那么浏览器就会按照url去后台请求数据。但是在vue项目中，url只是在router中定义的跳转路径...
SpringBoot整合Vue访问index.html出现404
Au的博客
12-06 6277
SpringBoot的yml（properties、yaml）文件配置了禁用资源映射 有的项目可能为了要使用@ControllerAdvice与@ExceptionHandler来捕获controller层的异常，可能会在配置文件中配置了如下内容，从而禁用了资源映射： spring: mvc: throw-exception-if-no-handler-found: true # 告诉...
后台解决springboot+Vue项目整合后，刷新页面出现404的问题
weixin_51542566的博客
10-21 2263
后台解决springboot+Vue项目整合后，刷新页面出现404，找不到页面的问题 解决方法： 在配置类中添加如下，将errorpage定向到index.html，代码如下 package com.ice.config; /** * @author 紫风 * @date 2021年10月11日 19:54 */ import org.springframework.boot.web.server.ErrorPage; import org.springframework.boot.web.serv
vue+springboot+redis+kaptcha实现登录验证码
04-10
vue+springboot+redis+kaptcha实现登录页验证码
部署vue+Springboot前后端分离项目的步骤实现
10-15
主要介绍了部署vue+Springboot前后端分离项目的步骤实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+springboot前后端分离项目源码
10-09
vue+springboot+redis+druid+rabbitmq前后端分离项目源码
vue+springboot前后端分离实现单点登录跨域问题解决方法
08-28
主要介绍了vue+springboot前后端分离实现单点登录跨域问题的解决方法,需要的朋友可以参考下
springboot+vue部署后出现springboot后端部分页面404
qq_61887118的博客
09-16 1923
springboot vue前后端分离项目中request请求路径失败，代理设置解决
Maven打包Springboot+Vue项目后，刷新居然报了404
夜无星的博客
12-20 1336
使用Maven打包 vue 和 Spring boot 后 我找不到他了，浏览器告诉我404
springboot加vue打包后运行访问不到vue页面问题
又菜又爱玩的博客
04-18 2124
找了很多博客都没有解决，最后切换了个项目再切换回来，突然就可以访问了，于是将vue打包文件放进去后进行maven刷新，发现问题解决。 刷新后
Vue + SpringBoot项目服务器部署后浏览器刷新页面404错误分析和解决方案
qq_37225921的博客
09-01 3927
先贴解决方案代码，再分析原因 VUE前端代码 在App.vue页面的routet-view中加入v-if代码 <router-view v-if="isRouterAlive"></router-view> 再在App.vue页面js代码里引入provide方法并在data中声明变量isRouterAlive以及在method中添加reload方法 export default { name: 'app', provide() { return {
使用vue + springboot 获取前端页面上传到后台文件的本地路径
09-12
### 回答1： 可以使用Vue和SpringBoot来获取前端页面上传文件的本地路径。首先，在Vue中，可以使用input标签的change事件获取上传文件的本地路径，然后将本地路径传递到SpringBoot后台。具体操作可以参考Vue和SpringBoot的相关文档。 ### 回答2： 使用Vue和Spring Boot获取前端页面上传文件的本地路径的步骤如下： 1. 首先在Vue中使用`<input type="file">`元素创建一个文件上传输入框，让用户选择要上传的文件。 2. 在Vue的组件中，使用`axios`或其他HTTP库将选择的文件发送到Spring Boot后台。 3. 在Spring Boot的Controller中创建一个接收文件的API接口，使用`@PostMapping`注解来处理POST请求，同时指定文件上传的路径。 4. 在接口方法中，使用`@RequestParam`注解获取前端发送的文件，并通过`transferTo`方法保存文件到指定路径。 5. 在Vue中，可以在文件上传成功后显示文件的本地路径，可以通过接口返回的数据中包含文件存储路径，然后在Vue组件中显示出来。 6. 在Vue中，可以通过接口返回的数据或者从服务器请求数据，将文件的本地路径显示在页面上，比如显示在一个列表或者详情中。 综上所述，通过使用Vue和Spring Boot，可以实现从前端页面上传文件到后台并获取文件的本地路径。Vue负责文件的选择和发送，Spring Boot负责接收和保存文件，并通过API接口返回文件的存储路径，Vue再将路径显示在前端页面上。 ### 回答3： 使用Vue和Spring Boot可以很方便地获取前端页面上传到后台的文件本地路径。具体步骤如下： 1. 前端页面使用Vue框架编写，可以使用Vue的文件上传组件，比如`element-ui`的`el-upload`组件。在组件的`before-upload`钩子函数中，可以通过`FormData`对象将文件上传到后台。同时，将`file`对象作为参数传递给后台。 2. 后台使用Spring Boot框架编写，可以在Controller层定义一个`POST`请求的接口，接收前端传递过来的`file`对象。在Controller方法中，可以通过`@RequestParam("file") MultipartFile file`注解将文件对象转换为`MultipartFile`类型，方便后续操作。 3. 在后台Controller方法中，可以调用`MultipartFile`对象的`transferTo`方法，将文件保存到本地指定路径。可以使用`java.nio.file.Paths`类的静态方法`get`获取本地路径，再调用`MultipartFile`对象的`transferTo`方法指定文件保存的本地路径。 4. 完成文件保存后，将文件的本地路径返回给前端。可以使用`ResponseEntity`来包装返回结果，将保存的文件本地路径作为返回值返回给前端。 通过以上步骤，我们可以实现前端页面上传文件到后台后，获取上传文件的本地路径。前端页面使用Vue完成文件上传，后台使用Spring Boot接收并处理文件上传请求，将文件保存到指定的本地路径，最后将文件的本地路径返回给前端。这样，我们就可以方便地获取到上传文件的本地路径了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值