服务器部署vue项目，正常点击可以访问，但是一刷新就404

最新推荐文章于 2024-05-17 10:30:00 发布
最新推荐文章于 2024-05-17 10:30:00 发布
阅读量1k 收藏 1
点赞数
分类专栏： 笔记 文章标签： 服务器 vue.js 前端
本文链接：https://blog.csdn.net/qq_43421954/article/details/123176946
版权

服务器成功部署vue项目，正常访问可以进入页面，但是一刷新就报404not found
解决
在这里插入图片描述
但是这样地址不好看，不过问题确实也解决了

一般社员
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue、react等单页面项目应该这样子部署到服务器
11-26
最近好多伙伴说，我用vue做的项目本地是可以的，但部署到服务器遇到好多问题：资源找不到，直接访问index.html页面空白，刷新当前路由404。。。现在我们一起讨论下单页面如何部署到服务器？ 由于前端路由缘故，单页面应用应该放到nginx或者apache、tomcat等web代理服务器中，千万不要直接访问index.html，同时要根据自己服务器的项目路径更改react或vue的路由地址。 如果说项目是直接跟在域名后面的，比如:http://www.sosout.com ，根路由就是 ‘/’。 如果说项目是直接跟在域名后面的一个子目录中的，比如:http://www.sosout.com/
部署Vue项目，运行刷新后404问题（已解决）
weixin_68714627的博客
11-30 934
这样，Vue 应用将加载并确定展示哪个组件。针对 Nginx 服务器，可以通过修改配置文件来解决这个问题。经过分析，发现这是因为服务器无法正确处理前端路由（vue-router）导致的。针对这个问题，需要配置服务器，使得对所有前端路由路径的请求都返回。这样一来，无论用户访问的是哪个前端路由，Nginx 都会返回。在 Nginx 的配置中，添加一个新的。，然后前端路由就能正确地接管页面的显示了。同一个 index.html。，这样所有的路由都会被指向。index.html 文件。
前端项目打包部署到tomcat后可以访问，刷新页面404问题
qq_44888952的博客
09-19 1244
2. 配置历史模式：如果你使用了Vue Router的history模式，确保在创建路由时使用`createWebHistory`函数，并传入正确的`BASE_URL`参数。3. 配置Tomcat：如果你使用的是Tomcat服务器，请确保已正确配置Tomcat的`context.xml`文件。确保在`Context`元素中设置了正确的`path`属性，以与你在Vue路由中定义的`BASE_URL`参数匹配。这将告诉Tomcat当遇到404错误时，将请求重定向到Vue应用的`index.html`页面。
基于Django+python的歌曲推荐系统源码+项目部署说明.zip
08-21
【资源说明】 基于Django+python的歌曲推荐系统源码+项目部署说明.zip 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能。 系统采用的技术 前端: vue 框架 后端: django 2.2.1 + sqlite3数据库 (MVC框架) 数据: python从网易云热榜爬取歌曲信息，保存到数据库中 主要功能: 展示音乐信息，根据收藏进行推荐 ## 推荐算法思路 通过协调过滤计算和其他用户的距离，然后进行筛选。如果用户数量不足，推荐数目不够15条，就会自动从 所有未打分的歌曲中按照浏览数降序选一部分填充进去。 ### 基于用户的推荐 1. 用户需要给歌曲打分。通过用户已打分的部分来计算相似度,如果用户未打分，或者没有其他用户，则按照浏览数降序返回。 2. 通过pearson算法来计算用户之间的距离，找到距离最近的N个用户。将这些用户中已打分的歌曲(且要推荐的用户未看过的部分)返回。 ### 基于item的推荐 1. 计算物品相似度矩阵: https://www.jianshu.com/p/27b1c035b693 2. 遍历当前用户已打分的item，计算和未打分的item的相似距离。 3. 对相似距离进行排序 返回 ## 主要实现的功能 1. 登录注册页面 2. 基于协同过滤的歌曲的分类，排序，搜索，打分，排序功能。 3. 基于协同过滤的周推荐和月推荐 fixed 1. 首页导航栏链接错误 2. 首页面为空 3. 登录注册页面 4. 推荐跳转登录 5. 周推荐用户没有评分时随机推荐 6. 按照收藏数量排序 7. 重新设计了 action 和UserAction model，拆分出了UserAction ## 歌曲模型 1. 浏览量 每次刷新页面的浏览数 2. 收藏量 user manytomany field 每个用户收藏一次 3. 评分 rate 每个用户评分一次 4. 在歌曲下面的评论加点赞功能 ## 安装运行方法 ## 安装依赖 1. 将项目导入pycharm, 在pycharm配置python解释器，3.7及以下都可以。可以通过conda或者其他的虚拟环境来安装 2. 打开终端 输入pip install -r requirements.txt 若提示无pip。去下载get-pip.py 运行python get-pip.py 3. 在pip安装过程中如果报错C++ 14依赖问题。则安装c++依赖工具。找不到找我要。如果安装速度过慢，请更换国内镜像https://blog.csdn.net/chenghuikai/article/details/55258957 4. 安装成功后，进入运行阶段 ## 运行 1. 运行服务器: python manage.py runserver
记一次vue去除#问题处理经过小结
12-10
1、vue项目，在浏览器中看到的路由都是带有#的，如果想去掉#，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。只需要在路由表中，加入一行代码即可：使用mode: ‘history’属性，在路由代码中添加mode：’history’即可 2、build以后部署到服务器，会出现刷新页面报404错误，查看了一些资料和官方vue history模式的配置方法进行尝试，我原以为就这样配置一下就可以了，结果…… 我的网站是阿里云虚拟机+nginx+tomcat进行建站，在nginx的配置文件中，起初为去掉#时配
Vue 打包部署到服务器后，非主页刷新后出现404问题解决
zhangjj2418的博客
02-20 2885
先不讨论是什么原因，直接说解决方法，分两种情况，一种是直接部署到根目录出现404，另一种是部署到二级以上目录出现404 如果是部署到根目录出现404问题，分以下情况 如果服务器是apache环境 确认apache的mod_rewrite模块是否安装并开启， 在根目录寻找.htaccess文件，如果不存在则创建该文件， 在.htaccess文件中加入以下代码 <IfModule m...
解决vue-cli3使用axios显示404
前端菜鸡的博客
09-19 1720
今天第一次用调取后台的接口，接口是通的，但是一直显示404 后来发现是我调的接口没加/api 加上以后就行了
vue 项目 页面刷新404问题
热门推荐
q1ngqingsky的博客
04-22 1万+
vue页面访问正常，但是一刷新就会404的问题解决办法： 第一种解决方法： 将vue路由模式mode: 'history' 修改为 mode: 'hash' //router.js文件 const router = new Router({ //mode: 'history', mode: 'hash', routes: [ { path: '/', redirect: '/login' }, { path: '/login', compon
Nginx 服务部署 Vue 项目后刷新页面,出现 404 问题
weixin_43079157的博客
11-13 2026
一、环境 1.vue-cli 3.x 2.Nginx 二、综述 项目之前vue-router使用默认‘hash’模式，在本地与部署线上环境后都没有问题，因为要去掉URL中的 ‘#’ 号，故使用‘history’路由模式，故再次部署线上环境后，首页能正常访问，菜单内点击切换也没有问题，但当你刷新页面后，则出现 404 Not Found，故在此记录一下解决办法 三、解决思路 刷新页面时访问的资源在...
解决vue router使用 history 模式刷新后404问题
12-09
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端修改404错误页面的配置路径，让其指向到index.html。 警告： 因为这么做以后，你的服务器就不再返回 404 错误页面
IIS10.0部署netcor+vue前后端两个HTTPS域名方法IIS配置API接口转发
06-15
IIS10.0部署netcor+vue前后端两个HTTPS域名方法IIS配置API接口转发 IIS10.0配置API重写转发 IIS10.0配置SSL域名证书 IIS10.0配置一台服务器前后端部署SSL IIS10.0配置vue刷新后显示400
关于vue项目部署到服务器页面刷新会出错（页面报错：500 Internal Server Error）
Namaste_的博客
08-30 1万+
废话少说先上错误图片： 首先分析一下出现这个错误的原因是前端项目路由配置的时候路由的用了history模式(mode: ‘history’)；用这种模式的好处是让我们的URL看起来不像hash那么丑（url中会有#），大家应该都懂，这里就不用多详细介绍了，不过这种模式（history）要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，就会返回404，对于后端配...
Vue~~
洛尘的博客
08-19 3087
Vue
vue项目，build后，刷新后页面挂掉cannot get
weixin_33937913的博客
05-10 850
1.项目完成后，npm run build 后，首次进入测试的接口 localhost:9000没有问题，但是当刷新的时候页面就挂掉了？ 解决办法去掉mode:'history',开启HTML5 History Mode后，尤其需要server端的支持 let router = new VueRouter({//mode: 'history',注释掉解决问题routes: [{path: ...
使用nginx部署vue项目后,刷新会找不到页面解决解决方法
qq_55272229的博客
07-04 4198
整个配置文件和Nginx的位置可能因操作系统和安装方式而有所不同，一般在 Linux 系统下，配置文件路径位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default。当使用Nginx部署Vue项目时，刷新页面可能导致无法找到页面的问题，这是由于Vue Router使用了前端路由的方式导致的。这样配置后，当刷新页面时，Nginx会将请求发送到Vue应用的入口文件，让Vue Router接管路由的处理，确保能够正确加载相应的页面。
解决vue-router使用 history 模式刷新后404问题
weixin_46852620的博客
02-01 1290
因为我们的应用是单页客户端应用，当使用 history 模式时，URL 就像正常的 url，可以直接访问http://www.xxx.com/user/id，但是因为vue-router设置的路径不是真实存在的路径，所以刷新就会返回404错误。 想要history模式正常访问，还需要后台配置支持。要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。 也就是在服务端修改404错误页面的配置路径，让其指向
服务器数据恢复—KVM虚拟机被误删除怎么恢复数据？
最新发布
beiya123的博客
05-17 93
9、针对存放程序代码的服务器中的节点和目录项丢失的情况，若节点或目录项有残留，可以尝试去补齐节点和目录项。如果文件的节点和目录项同时丢失，在这种情况下，根据节点和目录项之间相关联的特性则无法补齐节点和目录项。针对运行数据库的服务器中的数据库文件有丢失的情况，可以通过从自由空间中获取数据库页的方式去修补数据库文件。7、从自由空间中获取有效信息，尝试修补虚拟磁盘文件的节点，目录项以及虚拟磁盘文件中的数据库页等数据。4、完成索引的修复后解析服务器中残留的各级索引，从被误删除虚拟机所在的卷中提取虚拟磁盘文件。
Linux repo包安装Nginx
weixin_43485737的博客
05-14 338
一般Nginx默认是安装在/etc/nginx 目录。
nginx部署vue项目刷新404
07-25
当使用nginx部署vue项目时，刷新页面或访问路由配置页面时可能会出现404错误。这是因为vue项目属于单页面开发，只有一个index.html文件。解决这个问题很简单，只需要将访问重定向到index.html页面，然后由index.html处理对应的路由跳转。可以通过修改nginx的配置文件来实现。首先，在nginx的配置文件中添加以下代码： ``` location / { try_files $uri $uri/ /index.html; } ``` 这样就可以解决刷新页面时出现404错误的问题。然后，重启nginx服务器使配置生效。这样就完成了nginx部署vue项目并解决刷新404的问题。\[1\]\[3\] #### 引用[.reference_title] - *1* [nginx部署vue项目，刷新页面404](https://blog.csdn.net/qq_45029459/article/details/129014641)[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^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [Nginx部署Vue项目以及解决刷新页面404问题](https://blog.csdn.net/qq_27985607/article/details/86608392)[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^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [五步用Nginx部署Vue项目及动态路由刷新404问题解决](https://blog.csdn.net/weixin_54218079/article/details/125755795)[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^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值