nginx部署前端项目,url带有路由刷新后出现404,路由匹配不上

已于 2023-12-21 09:26:10 修改
阅读量864 收藏 9
点赞数 9
分类专栏： 服务部署类 文章标签： nginx 前端 运维
于 2023-12-21 09:25:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/honghongzZ/article/details/135122575
版权

在使用nginx发布前端时,遇到访问IP+端口可以,但是在有路由的地址刷新后就会404

首先配置nginx

下载nginx后找到配置文件,前端项目打包后的dist包,上传至服务器,

我dist包放在了home/menhu下

接下来是修改nginx的配置文件,,在服务器nginx的文件夹下找到nginx.conf打开修改配置

接下来保存重启nginx

打开浏览器访问服务器ip+设置的端口号888

可以看到能够成功访问,但是进入到项目路由后刷新就会404

这个时候需要在nginx配置加上

try_files $uri $uri/ /index.html;

保存重启nginx

在浏览器访问,发信刷新后不会出现404了

在飘着呢6751
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
NGINX 部署项目时，遇到刷新页面导致 404
King Saj
06-05 118
通过以上配置，你的 NGINX 将正确处理所有请求，避免刷新页面导致的 404 错误。此时，所有的 URL 请求都会被重定向到。，并由前端路由器（如 React Router 或 Vue Router）处理具体的路由。首先，确保你的项目已经构建完毕，并且所有静态文件（如。文件等）都位于一个目录下，例如。
Nginx配置React项目Url后直接输入路由路径时报404问题的解决
01-11
前言 如今react应用普遍，最近在配置react项目中遇到了一个问题，通过查找相关的资料终于找到了解决的方法，所以想着总结一下分享出来给有需要的朋友们，下面话不多说了，来一起看看详细的介绍吧。 发现问题 大家都知道，当我们写完项目后，要对项目进行部署，我的配置很简单 location /demo { root E:/; index index.html index.htm; } 这样配置的有一个问题，只能 http://localhost/demo/来访问。 如果想访问里面的其它界面如 http://localhost/demo/page1的话，就报404找不到页面。 可我在开
Nginx与history路由模式：刷新页面404问题
席木木的博客
02-08 3064
Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决
前后端项目，nginx部署前端项目后刷新浏览器报错404的问题
奋斗男孩的博客
12-15 404
【代码】前后端项目，nginx部署前端项目后刷新浏览器报错404的问题。
vue项目本地开发完成后部署到服务器后报404是什么原因
常来常往，共同成长
01-18 1179
前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可
Nginx部署前端Vue项目完成后，直接访问路径出现404的问题
qq_31795591的博客
11-04 877
今天部署好Vue项目后，发现直接ip访问是可以的，通过首页的导航栏访问也是可以的，但是ip+路径后访问就会出现404，在此记录一下！文件，然后前端JavaScript可以根据路由加载正确的内容，实现前端路由导航。最后解决方案是在nginx的nginx.conf配置文件中加入。这个配置，确保不管用户请求的是哪个路由，服务器都返回同一个。为了使单页应用程序正常工作，需要使用。
使用nginx部署前端项目出现404问题
wahahahq的博客
03-08 3188
nginx部署前端404问题
Nginx 踩坑笔记: 部署 React/Vue 前端应用路由 404 Not Found(Error: 404 Not Found | Nginx 1.21.6)
超悠閒的博客
03-03 3316
Nginx 踩坑笔记: 部署 React/Vue 前端应用路由 404 Not Found(Error: 404 Not Found | Nginx 1.21.6) 文章目录Nginx 踩坑笔记: 部署 React/Vue 前端应用路由 404 Not Found(Error: 404 Not Found | Nginx 1.21.6)0. 项目背景1. 问题描述2. 问题排查 & 解决方案解决方案附录：示例项目运行文档参考连接 0. 项目背景 React/Vue 等 SPA 前端应用使用 hist
Nginx部署Vue项目动态路由刷新404
顶顶顶顶顶顶顶顶顶顶顶顶
08-13 243
Nginx部署Vue项目动态路由刷新404
安装Windows版nginx以及部署前端代码并就解决刷新出现404
y516369的博客
07-27 3550
安装Windows版nginx以及部署前端代码并就解决刷新出现404
使用nginx部署前端项目（超详细教程）.pdf
04-29
使用nginx部署前端项目是一篇非常详细的教程，旨在帮助初学者使用Nginx来部署前端项目。本文首先介绍了Nginx的基本概念和作用，解释了为什么Nginx是一个强大的Web服务器和反向代理。然后，文章详细讲解了如何在Linux...
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
web服务器nginx+部署前端vue项目
最新发布
03-22
其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。 2.Nginx 作为 web 服务器 Nginx 可以作为静态...
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
主要介绍了nginx 部署 vue 项目找不到js css文件的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue实现远程获取路由与页面刷新导致404错误的解决
10-17
本文将详细讲解如何在Vue中实现远程获取路由以及解决页面刷新后出现404错误的问题。 一、项目背景 在前后端分离的项目中，通常由后端负责用户权限管理，不同的角色可能有不同的访问权限。为了实现这一功能，我们...
宝塔nginx部署前端页面刷新报404
月亮被咬碎成星星的博客
01-14 1885
已解决
若依前后端分离前端部署nginx反向代理后刷新页面失效及用户登录后404问题解决
NaZoKaZe的博客
01-06 4702
项目需要部署到服务器之后由第三方进行了反向代理，所以我们必须适配第三方的url。由于第一次部署固定好路由格式的前端项目，途中遇到了比较多的问题。用户登录后页面重定向到404页面，点击返回首页后才能进入到正常页面。
react部署nginx路由页直接访问404解决方案
baidu_39549896的博客
11-25 547
此时通过配置try_files来重定向返回index.html文件，也就是回去首页“ / ”,注意，此时你的页面已经刷新过了，此时react-router或者vue-router路由发挥作用，会根据当前的url地址来对应匹配上组件，所以此时url即对应组件，页面重新加载完成，完事。react打包程序直接上传服务器，部署到 nginx 上后在非根路由下刷新发生 404 Not Found。
vue 路由history模式 项目打包刷新后出现404 apache、nginx环境，如何解决
06-16
在 Vue 路由的 history 模式下，刷新页面会导致 404 错误的出现，这是因为浏览器会向服务器发送请求，但服务器并没有对应的路由，因此就会返回 404 错误。解决这个问题的方法有两种： 1. 配置后端服务器 如果你的 Vue 项目部署在 Apache 或 Nginx 等 Web 服务器上，你可以配置服务器来处理这个问题。具体做法是，在服务器上配置一个重定向规则，将所有的 URL 请求都重定向到 index.html 文件上。以 Apache 服务器为例，可以在 Apache 的配置文件（如 httpd.conf）中添加以下规则： ``` <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` 这个配置将所有的 URL 请求都重定向到 index.html 文件上，这样即使刷新页面，服务器也会返回正确的内容。 2. 使用 hash 模式 如果你不想在服务器上配置重定向规则，你可以考虑使用 hash 模式。在 hash 模式下，Vue 会使用 URL 中的 # 符号来表示路由，这样即使刷新页面，浏览器也只会重新加载 index.html 文件，而不会向服务器发送请求。要启用 hash 模式，只需要在 Vue 路由的配置中添加以下代码： ``` const router = new VueRouter({ mode: 'hash', routes: [...] }) ``` 这样就可以启用 hash 模式了。需要注意的是，hash 模式下，URL 中的 # 符号后面的内容不会被发送到服务器，因此你需要在前端代码中使用 JavaScript 来解析 URL 中的 hash 值，并根据这个值来渲染不同的页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值