Nginx部署项目 刷新404问题

Nginx与history路由模式:刷新页面404问题 Nginx与history路由模式:刷新页面404问题,通过nginx服务端配置解决 阅读详情

之前的Nginx配置如下

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   D:/police/terminal-client; 
            index  index.html index.htm;
        }

        location /api/ {
            proxy_pass      http://localhost:8888/;
            proxy_redirect  off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

当业务进行的时候,url就会改变,如登录页面
入口url:http://localhost/
登录是的url:http://localhost/login

这个时候,刷新页面nginx就会给你个404

更改配置,增加配置 try_files $uri $uri/ /index.html;

location / {
	 root   D:/police/terminal-client; 
	 try_files $uri $uri/  /index.html;
	 index  index.html index.htm;
}

try_files

	在这里插入代码片以 try_files $uri $uri/ /index.html; 
	为例,当用户请求 http://localhost/login时,
	这里的 u r i 就 是 / l o g i n 。 t r y f i l e s 会 到 硬 盘 里 尝 试 找 这 个 文 件 。 
	如 果 存 在 名 为 / uri 就是 /login。
	try_files 会到硬盘里尝试找这个文件。
	如果存在名为 / uri就是/login。tryf​iles会到硬盘里尝试找这个文件。
	如果存在名为/root/login(其中 $root 是 WordPress 的安装目录)的文件,
	就直接把这个文件的内容发送给用户。
	显然,目录中没有叫 login的文件。然后就看 u r i / , 增 加 了 一 个 / , 
	也 就 是 看 有 没 有 名 为 / uri/,增加了一个 /,
	也就是看有没有名为 / uri/,增加了一个/,也就是看有没有名为/root/login/ 的目录。
	又找不到,就会 fall back 到 try_files 的最后一个选项 /index.html,
	发起一个内部 “子请求”,也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.html。
Nginx出现403 Forbidden、404 Not Found错误的解决方案 阅读详情

相关推荐

Nginx部署的前端项目刷新404问题

nginx快速学习

烛照@123的博客 1188

nginx刷新显示404

nginx部署完项目后,访问时 刷新后 就会出现404的报错界面(不是首页根目录刷新时)

qq_39535439的博客 9538

NGINX 部署项目时,遇到刷新页面导致 404

通过以上配置,你的 NGINX 将正确处理所有请求,避免刷新页面导致的 404 错误。此时,所有的 URL 请求都会被重定向到。,并由前端路由器(如 React Router 或 Vue Router)处理具体的路由。首先,确保你的项目已经构建完毕,并且所有静态文件(如。文件等)都位于一个目录下,例如。

King Saj 2618

3招解决Nginx实现404页面的实现!

Nginx访问一个静态的html 页面,当这个页面没有的时候,Nginx抛出404,那么如何返回给客户端404呢?# 关键参数:这个变量开启后,我们才能自定义错误页面,当后端返回404,nginx拦截错误定义错误页面。看下面的配置,这种情况下不需要修改任何参数,就能实现这个功能。# 定义错误页面码,如果出现相应的错误页面码,转发到那里。如果后端是php解析的,需要加一个变量。# 承接上面的location。# 放错误页面的目录路径。在http段中加一个变量。

Free雅轩的博客 2万+

nginx部署项目刷新404问题

nginx部署项目刷新404,对用户体验很不友好,问了一个“有经验”的朋友,他说nginx配置后就这样的,将信将疑,事也多,就把这个问题丢到一边了。今天测试时,再也忍不下去了,查询资料,发现解决竟是如此简单,亲测有效。 在nginx.conf配置中server的location下添加 try_files $uri $uri/ /index.html; 完美解决!!! http { include mime.types; default_type applicatio.

尘微的博客 8376

微信小游戏审核避坑指南:如何一次性通过微信审核(附最新审核要求)

本文详细解析微信小游戏审核全流程,提供从开发到上线的关键策略,帮助开发者一次性通过审核。涵盖合规性自查、材料优化、开发环境配置、版本管理、审核材料填写技巧等核心内容,并附最新审核要求和常见驳回问题解决方案,显著提升审核通过率。

weixin_28454475的博客 1411

Nginx部署Vue项目以及解决刷新页面404问题的教程

第一步在控制台终端输入npm run build 打包完成之后项目中会生成一个dist文件夹 第二步 将里面的static文件和index.html文件打成压缩包 第三步 将压缩包上传至服务器 第四步 解压此文件到nginx/html/目录下,并将nginx/html原文件删除 第五步 输入服务器ip+nginx配置端口号即可访问页面 第六步 进入页面刷新会404 解决项目部署到nginx服务器中刷新页面404的问题 进入nginx配置文件目录 cd nginx/conf/ 2.编辑配置文件nginx

qi_teng的博客 1145

C语言实现TCP聊天室:Socket编程与并发模型实战解析

网络编程是构建分布式系统的核心技术,其核心在于理解进程间通信的底层机制。TCP/IP协议栈提供了可靠的字节流传输服务,通过Socket API这一抽象接口,开发者可以在应用层建立连接、收发数据。为了高效处理多个并发连接,服务器需要采用多线程或I/O复用模型,前者为每个连接创建独立线程,逻辑清晰但资源消耗大;后者通过select、poll或epoll等系统调用监控多个文件描述符,显著提升并发能力。这些技术是构建高性能网络服务(如即时通讯、在线游戏服务器)的基础。本文以C语言实现一个简洁的TCP聊天室为例,详细

weixin_32642109的博客 292

五步用Nginx部署Vue项目及动态路由刷新404问题解决

用Nginx部署Vue项目详细步骤及动态路由刷新404问题解决

weixin_54218079的博客 1万+

Qt绘图库对决:QWT与QCustomPlot的实战选型指南

本文为Qt开发者提供了QWT与QCustomPlot两大绘图库的实战选型指南。文章从功能特性、性能资源、开发效率三大维度进行深度对比,并结合工业监控、科学计算、嵌入式设备等典型场景,给出了清晰的决策清单。对于需要专业科学图表(如极坐标、等高线图)的场景推荐QWT;对于追求高性能、实时性、快速开发及嵌入式部署的通用图表需求,QCustomPlot是更优选择。

alpha的博客 241

MFC 利用soap 调用web service

MFC 利用soap 调用web service

congjiaoyan3682的博客 785

Nginx部署Vue项目以及解决刷新页面404问题

一、打包项目 1.在项目中的package.json上右键,点击Show npm Scripts 2.打包(或者直接在项目根目录运行 npm run build 命令) 3.成功后会在项目根目录生成dist文件夹 二、压缩并上传项目到服务器(我这里是使用SecureCRT工具进行上传和部署项目的) SecureCRT版本信息如下: 1.压缩文件 2.上传文件 2.1 输入命令rz -y上传(我这里是上传到root目录下的) 若没有上传信息,可再次输入rz命...

lxw1844912514的博客 3281

新手必看!无人机定高PID调参避坑指南:从理论到实战的完整流程

本文为无人机新手提供定高PID调参的完整指南,从传感器融合到抗风策略,详细解析多传感器融合、PID控制参数调试及环境干扰应对。通过实战案例和代码示例,帮助开发者快速掌握无人机定高技术,避免常见调参陷阱,提升飞行稳定性。

spark7igniter的博客 221

vue项目通过nginx部署,刷新产生404问题的解决

vue项目通过nginx部署,刷新产生404问题的解决

m0_37630138的博客 5439

YOLOv8【第十一章:视频追踪与流处理篇·第6节】BoT-SORT 改进:结合相机运动补偿(CMC)提升追踪稳定性!

🏆 本文收录于 《YOLOv8实战:从入门到深度优化》 专栏。该专栏系统复现并梳理全网各类 YOLOv8 改进与实战案例(当前已覆盖分类 / 检测 / 分割 / 追踪 / 关键点 / OBB 检测等方向),坚持持续更新 + 深度解析,质量分长期稳定在 97 分以上,可视为当前市面上 覆盖较全、更新较快、实战导向极强 的 YOLO 改进系列内容之一。

**My Coding Family** 718

SAP_MM模块采购订单显示含税价&不含税简介

不含税价(Net Price):基础商品价格,不包含税金。含税价(Gross Price):基础价格加上适用税金后的总价。在SAP中,采购订单通常以不含税价为基础,通过配置税码和定价方案,系统会自动计算含税总价。

我小时候很黑的博客 2301

nginx 部署vue项目,页面白屏或者页面刷新出现404问题

解决在nginx 部署vue项目时,页面白屏或刷新出现404问题

qq_52700250的博客 1万+

Transformer实战(38)——视觉Transformer (Vision Transformer, ViT)

Transformer 在自然语言处理 (NLP) 领域取得了显著成就,在许多不同的任务中都表现出色。在本节中,我们将探索视觉 Transformer (Vision Transformer, ViT) 模型。正如 NLP 领域创建了多种模型一样,视觉领域也开发了多种模型,每种模型都为计算机视觉提供了新的视角。通过本节,将学习如何使用 ViT 等模型进行计算机视觉任务,了解基于 Transformer 的预训练计算机视觉模型的工作原理,以及如何针对特定任务进行微调。

盼小辉丶的博客 2844

宝塔面板部署项目,页面刷新时出现nginx404问题

当宝塔部署完项目,使用项目出现页面刷新nginx404问题;

wings14的博客 1802

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

Vue3项目Nginx部署刷新404问题解决方法

Vue项目部署后刷新404,通常通过正确配置Nginx,让无法找到资源的请求回退到index.html即可解决。关键是根据你的项目是部署在根目录还是子目录,选择合适的Nginx配置写法,并确保Vue项目的路由模式和公共路径设置与之匹配。

BillKu的博客 914

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题(完整步骤)(亲测有效)

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题(完整步骤)(亲测有效)

mrliucx的博客 3430

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

Nginx部署vue 静态项目 刷新404问题

之前写了一篇不是nginx部署vue静态项目的文章=>传送门 发现刷新的时候会出现404问题 之前的Nginx配置如下 server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root D:/police/terminal-client; inde.

Etwases的博客 1171

JeecgBoot项目Vue3前端部署Nginx刷新404问题解决方案

JeecgBoot项目Vue3前端部署Nginx刷新404问题解决方案 【免费下载链接】JeecgBoot ????企业级低代码平台集成了AI应用平台,帮助企业快速实现低代码开发和构建AI应用!前后端分离架构 SpringBoot,SpringCloud、Mybatis,Ant Design4、 Vue3.0、TS+vite!...

gitblog_01418的博客 563

nginx部署vue项目刷新404,查看官方文档,正常访问没问题,只有在刷新的时候出现问题

nginx部署vue项目刷新404,正常访问没问题,只有在刷新的时候出现问题 vue-cli官网给出的解决方案: https://cli.vuejs.org/zh/guide/deployment.html#docker-nginx try_files $uri $uri/ /index.html; server { listen 80; server_name lo...

艾小逗 1156
上一篇: ECharts 仪表盘配置项
下一篇: 解决使用element ui时el-input的属性type=number,仍然可以输入e的问题。
KeepLearningDay
博客等级 码龄6年 18粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值