当前位置: 首页 > news >正文

解决Nginx + Vue.js (ruoyi-vue) 单页应用(SPA) 404问题的指南

问题描述

在使用Vue.js构建的单页应用(SPA)中,特别是像ruoyi-vue这样的框架,如果启用了HTML5历史记录模式进行路由管理,那么用户直接访问子路径或刷新页面时可能会遇到404错误。这是因为当用户尝试访问一个非根路径时,Nginx会尝试查找对应的具体文件或目录,而这些资源实际上并不存在于服务器上,导致返回404错误。



原因分析

该问题的根本原因在于Nginx默认的行为是直接根据请求的URL去寻找静态资源或后端API接口。然而,在单页应用中,所有的前端路由都是通过JavaScript动态处理的,并没有实际对应的物理文件。因此,当用户直接访问或刷新某个子路径时,Nginx无法找到相应的文件,从而返回404错误。

解决方案

为了使Nginx能够正确处理单页应用的前端路由,我们需要配置Nginx,使其对于所有找不到具体文件或目录的请求都返回index.html文件。这允许Vue Router接管并根据前端路由配置来显示正确的页面内容。

可以在Nginx配置中的server块内添加以下location指令:

location / {try_files $uri $uri/ /index.html;
}

这段配置的作用是:

  • $uri:首先尝试匹配具体的文件。
  • $uri/:如果未找到文件,则尝试匹配作为目录。
  • /index.html:如果前两步均未成功,则提供index.html文件给客户端,让Vue Router处理剩下的路由逻辑。

完整的Nginx配置示例

conf {# 用于 test.com 的 HTTP 服务器块server {listen 80;server_name test.com;# 将所有 HTTP 请求重定向到 HTTPSreturn 301 https://$host$request_uri;}# 用于 test.com 的 HTTPS 服务器块server {listen 443 ssl;server_name test.com;ssl_certificate   /etc/nginx/cert/test.com.pem;ssl_certificate_key  /etc/nginx/cert/test.com.key;ssl_session_timeout 5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;ssl_prefer_server_ciphers on;# 处理前端页面location / {root   /system/a/b/c/index;  # 前端构建输出目录index  index.html index.htm;try_files $uri $uri/ /index.html;  # 尝试访问静态文件,如果不存在则返回 index.html}# 处理 API 请求location /test/ {proxy_set_header host                $host;proxy_set_header X-forwarded-for     $proxy_add_x_forwarded_for;proxy_set_header X-Real-IP           $remote_addr;proxy_pass http://127.0.0.1:9090/;  # 将请求代理到本地 9090 端口# WebSocket 支持proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";}}}

针对服务器面板

如果使用了服务器面板,可以支持一键可视化配置网站应用,但是默认的配置对于SPA单页应用并不友好,需要手动修改配置,常见的面板有(宝塔1Panel),由于我是用的是1Pane,这里拿1Panel举例:

面板原来自动生成的配置:

手动改配置:

注意事项

  • 重新加载Nginx配置:在修改完配置文件后,请记得执行sudo nginx -s reload命令以使更改生效。
  • 静态资源路径:如果您有额外的静态资源(如图片、CSS、JS等),请确保为它们配置合适的location块,并指定正确的路径。
  • 缓存控制:对于静态资源,可以考虑设置适当的缓存策略以优化性能,但要考虑到更新频率和缓存清理的问题。

相关文章:

解决Nginx + Vue.js (ruoyi-vue) 单页应用(SPA) 404问题的指南

问题描述 在使用Vue.js构建的单页应用(SPA)中,特别是像ruoyi-vue这样的框架,如果启用了HTML5历史记录模式进行路由管理,那么用户直接访问子路径或刷新页面时可能会遇到404错误。这是因为当用户尝试访问一个非根路径时…...

项目计划表如何制作?使用甘特图制作项目计划表的步骤

在项目管理中,项目计划是项目的核心要素,它详细记录了项目任务详情、责任人、时间规划以及所需资源。 这份计划不仅为项目推进提供指引,更是控制范围蔓延、争取更多支持的有力工具。 然而,如同项目管理的其他环节一样&#xff0…...

Flutter-底部分享弹窗(showModalBottomSheet)

showModalBottomSheet 构造函数的样式 Future<T?> showModalBottomSheet<T>({required BuildContext context, // 上下文对象&#xff0c;通常是当前页面的上下文bool isScrollControlled false, // 控制底部弹窗的大小&#xff0c;如果为…...

初学stm32 --- 时钟配置

目录 stm32时钟系统 时钟源 &#xff08;1&#xff09; 2 个外部时钟源&#xff1a; &#xff08;2&#xff09;2 个内部时钟源&#xff1a; 锁相环 PLL PLLXTPRE&#xff1a; HSE 分频器作为 PLL 输入 (HSE divider for PLL entry) PLLSRC&#xff1a; PLL 输入时钟源 (PL…...

LeetCode:226.翻转二叉树

跟着carl学算法&#xff0c;本系列博客仅做个人记录&#xff0c;建议大家都去看carl本人的博客&#xff0c;写的真的很好的&#xff01; 代码随想录 LeetCode&#xff1a;226.翻转二叉树 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 …...

(css)鼠标移入或点击改变背景图片

(css)鼠标移入或点击改变背景图片 html <div class"mapTip"><divv-for"(item, index) of legendList":key"index"class"mapTipOne":class"{ active: change index }"click"legendHandle(item, index)"…...

Unbuntu下怎么生成SSL自签证书?

环境&#xff1a; WSL2 Unbuntu 22.04 问题描述&#xff1a; Unbuntu下怎么生成SSL自签证书&#xff1f; 解决方案&#xff1a; 生成自签名SSL证书可以使用OpenSSL工具&#xff0c;这是一个广泛使用的命令行工具&#xff0c;用于创建和管理SSL/TLS证书。以下是生成自签名…...

OpenGL ES 03 加载3张图片并做混合处理

OpenGL ES 02 加载3张图片并做混合处理 什么是纹理单元纹理单元的作用使用纹理单元的步骤详细解释加载图片并绑定到到GPU纹理单元采样器的设置1.设置采样器变量的纹理单元编号&#xff0c;目的是为了告诉纹理采样器&#xff0c;从哪个纹理单元采集数据2.如果你没有显式地设置采…...

深度学习-74-大语言模型LLM之基于API与llama.cpp启动的模型进行交互

文章目录 1 大模型量化方法1.1 GPTQ(后训练量化)1.2 GGUF(支持CPU)1.3 AWQ(后训练量化)2 llama.cpp2.1 功能2.1.1 Chat(聊天)2.1.2 Completion(补全)2.2 运行开源LLM2.2.1 下载安装llama.cpp2.2.2 下载gguf格式的模型2.2.3 运行大模型3 API访问3.1 调用补全3.2 调用聊天3.3 提取…...

PyTorch 2.0 中设置默认使用 GPU 的方法

PyTorch 2.0 中设置默认使用 GPU 的方法 在 PyTorch 2.0 中&#xff0c;默认情况下仍然是使用 CPU 进行计算&#xff0c;除非明确指定使用 GPU。torch.set_default_device 是 PyTorch 2.0 引入的新功能&#xff0c;用于设置默认设备&#xff0c;使得所有后续张量和模块在没有明…...

如何在 Ubuntu 22.04 服务器上安装 Jenkins

简介 Jenkins 是一个非常流行的免费自动化工具&#xff0c;每个人都应该了解它。DevOps 工程师使用它来自动化代码构建、测试和部署。本文将重点介绍如何在新的 Ubuntu LTS 版本&#xff0c;即 Ubuntu 22.04 中安装 Jenkins。 但在此之前&#xff0c;让我们快速讨论一下 Jenk…...

【一篇搞定配置】如何在Ubuntu上配置单机/伪分布式Hadoop

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;各种软件安装与配置_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1.…...

利用Map集合设计程序,存储城市和对应等级相关信息

package testmap;import java.util.HashMap; import java.util.Scanner; import java.util.Set;public class TestHashMap6 {public static void main(String[] args) {//1.创建一个Map集合&#xff1a;存储键值对HashMap<String, String> map new HashMap<>();/…...

【自动驾驶】单目摄像头实现自动驾驶3D目标检测

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;传知代码 欢迎大家点赞收藏评论&#x1f60a; 目录 概述算法介绍演示效果图像推理视频推理 核心代码算法处理过程使用方式环境搭建下载权重文件pytorch 推理&#xff08;自动选择CPU或GPU&#x…...

21 go语言(golang) - gin框架安装及使用(二)

四、组成 前面的文章中&#xff0c;我们介绍了其中一部分组成&#xff0c;接下来继续学习&#xff1a; Router&#xff08;路由器&#xff09; Gin 使用基于树结构的路由机制来处理 HTTP 请求。它支持动态路由参数、分组路由以及中间件。路由器负责将请求路径映射到相应的处理…...

Intel(R) Iris(R) Xe Graphics安装Anaconda、Pytorch(CPU版本)

一、Intel(R) Iris(R) Xe Graphics安装Anaconda 下载网址&#xff1a;https://repo.anaconda.com/archive/ 双击Anaconda3-2024.10-1-Windows-x86_64&#xff0c;一直下一步&#xff0c;选择安装的路径位置&#xff0c;一直下一步就安装完成了。打开Anaconda PowerShell Promp…...

【Unity3D】实现可视化链式结构数据(节点数据)

关键词&#xff1a;UnityEditor、可视化节点编辑、Unity编辑器自定义窗口工具 使用Newtonsoft.Json、UnityEditor相关接口实现 主要代码&#xff1a; Handles.DrawBezier(起点&#xff0c;终点&#xff0c;起点切线向量&#xff0c;终点切线向量&#xff0c;颜色&#xff0c;n…...

Three.js推荐-可以和Three.js结合的动画库

在 Three.js 中&#xff0c;3D 模型、相机、光照等对象的变换&#xff08;如位置、旋转、缩放&#xff09;通常需要通过动画进行控制&#xff0c;以实现更加生动和富有表现力的效果。然而&#xff0c;Three.js 本身并没有内置的强大动画管理系统&#xff0c;尽管可以通过关键帧…...

增强现实(AR)和虚拟现实(VR)的应用

增强现实&#xff08;AR&#xff09;和虚拟现实&#xff08;VR&#xff09;是近年来迅速发展的技术&#xff0c;广泛应用于多个行业&#xff0c;提供沉浸式的体验和增强的信息交互。以下是AR和VR的定义及其在不同领域的具体应用。 相关学点&#xff1a; 2025年大数据、通信技术…...

告别机器人味:如何让ChatGPT写出有灵魂的内容

目录 ChatGPT的一些AI味道小问题 1.提供编辑指南 2.提供样本 3.思维链大纲 4.融入自己的想法 5.去除重复增加多样性 6.删除废话 ChatGPT的一些AI味道小问题 大多数宝子们再使用ChatGPT进行写作时&#xff0c;发现我们的老朋友ChatGPT在各类写作上还有点“机器人味”太重…...

LongCat-Video:136亿参数开源AI视频生成模型的技术突破与实践指南

LongCat-Video&#xff1a;136亿参数开源AI视频生成模型的技术突破与实践指南 【免费下载链接】LongCat-Video 项目地址: https://ai.gitcode.com/hf_mirrors/meituan-longcat/LongCat-Video 在人工智能视频生成领域&#xff0c;长视频生成一直是技术挑战的制高点。传统…...

大模型开发:裸辞还是在职?算清这笔账,转型之路少走弯路!

文章探讨了在大模型开发转型过程中&#xff0c;裸辞与在职学习的利弊及适用人群。裸辞可集中时间快速学习&#xff0c;但经济压力大&#xff1b;在职学习有稳定收入&#xff0c;但时间碎片化&#xff0c;学习周期长。文章建议根据个人经济状况、技能基础和风险承受能力选择路径…...

宇树机器狗Go2仿真入门:Gazebo环境下Gmapping建图全流程(附避坑指南)

宇树机器狗Go2仿真实战&#xff1a;Gazebo环境下的Gmapping建图与避坑指南 当四足机器人遇上SLAM技术&#xff0c;会碰撞出怎样的火花&#xff1f;宇树科技&#xff08;Unitree&#xff09;推出的Go2机器狗凭借其灵活的机动性和开源控制系统&#xff0c;已成为机器人开发者的热…...

GLM-OCR在跨境电商中的应用:多语言商品说明书OCR→自动翻译预处理

GLM-OCR在跨境电商中的应用&#xff1a;多语言商品说明书OCR→自动翻译预处理 1. 项目概述与背景 跨境电商卖家经常面临一个共同难题&#xff1a;来自不同国家的商品说明书语言各异&#xff0c;手动翻译不仅耗时耗力&#xff0c;还容易出错。传统OCR工具虽然能识别文字&#…...

投资组合优化中的常见陷阱:如何用LINGO和MATLAB避免风险计算错误

投资组合优化中的常见陷阱&#xff1a;如何用LINGO和MATLAB避免风险计算错误 在金融投资领域&#xff0c;优化投资组合是实现收益最大化和风险最小化的关键手段。然而&#xff0c;许多金融分析师和量化投资爱好者在实际操作中常常陷入各种计算陷阱&#xff0c;导致结果偏离预期…...

告别插件切换!一款满足你所有挖洞需求的浏览器插件助力高效挖洞

0x01 工具介绍 由于目前网上流通的插件功能都各有千秋&#xff0c;每个插件都有他自己的亮点&#xff0c;每次使用都得按场景去选择插件&#xff0c;为了能够有一款属于自己的完美插件&#xff0c;不用来回倒腾切换&#xff0c;由此GodEyes 诞生了。 它是一款可以帮助安全研究…...

BGE Reranker-v2-m3在VSCode插件开发中的应用

BGE Reranker-v2-m3在VSCode插件开发中的应用 1. 引言 作为一名长期使用VSCode进行开发的程序员&#xff0c;我经常遇到这样的困扰&#xff1a;在庞大的代码库中搜索特定功能或文档时&#xff0c;传统的文本搜索往往返回大量不相关的结果&#xff0c;需要花费大量时间手动筛选…...

飞书机器人告警配置避坑指南:夜莺监控常见报错解决方案

飞书机器人告警配置避坑指南&#xff1a;夜莺监控常见报错解决方案 深夜的告警风暴里&#xff0c;飞书机器人突然罢工是什么体验&#xff1f;上周三凌晨2点&#xff0c;当我面对满屏的Key Words Not Found和sign match fail报错时&#xff0c;终于理解了为什么运维工程师的咖啡…...

Qwen3-8B镜像站新手教程:如何选择模型并进行首次提问

Qwen3-8B镜像站新手教程&#xff1a;如何选择模型并进行首次提问 1. 认识Qwen3-8B&#xff1a;你的智能AI助手 Qwen3-8B是Qwen系列最新一代大型语言模型&#xff0c;拥有80亿参数&#xff0c;在推理能力、指令执行和多语言支持方面表现出色。这个模型特别适合个人开发者和小型…...

Enhancing LLM Reasoning with Knowledge Graphs: A Faithful and Interpretable Approach

1. 为什么需要知识图谱增强LLM推理 最近两年&#xff0c;大型语言模型&#xff08;LLM&#xff09;的表现确实让人惊艳。我测试过GPT-4在代码生成、文案创作等场景的表现&#xff0c;效果确实超出预期。但当我尝试用LLM做知识密集型任务时&#xff0c;比如回答"贾斯汀比伯…...