Vue路由模式为history的项目部署到Nginx

news2025/6/18 18:05:13

前言
对于前端工程师而言，多多少少会碰到按需加载的需求。
比如一个系统，需要用户登陆以后才能使用，对于传统的前后端未分离的情况，我们一般的处理方式是，当检测到用户未登录的时候，一般会重定向到登录页面，让用户进行登录。
但是对于前后端分离的情况，前端工程师一般倾向于单页面的处理模式，而想要处理这种情况的话，我们一般传统的做法是，会选择采用 location.search 的方式，即通过参数来判断。

比如检测到用户没登陆，我们会刷新页面，自动在地址后面加上诸如 ?page=login 等形式的参数，然后我们的系统初始化的时候，会检测 location.search 中是否存在这个参数，如果存在，页面上显示的就是登录有关的内容。

但是这种处理方式写起来太过复杂，而前端比较流行的框架 vue、react 等给了我们比较好的解决方案。

那就是采用 vue-router 或者 react-router 这种解决方案，一般会有两种模式，history 模式和 hash 模式，两种模式对于开发来说，没有任何的区别。
history、hash 模式区别

这里主要不是想介绍前端 router 的相关内容的，这里就一笔带过，不做过多的赘述了。
我们知道的是，history 模式，是基于 html5 提供的 history api 来实现的。
对于 react router 来说，它的作用是这样的：
Browser history 是使用 React Router 的应用推荐的 history。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/some/path这样真实的 URL 。
而一般所谓的 hash 模式，就是通过来监听 hash 的变化，来改变页面的视图的。
对于 react router 来说，他的作用是这样的：
Hash history 使用 URL 中的 hash（#）部分去创建形如example.com/#/some/path的路由。
到这里，我想以前不了解的童鞋应该会明白了，这篇文章想要表达的内容到底是什么了。
​
我们打包以后，采用 hash 的前端路由项目，扔在任何服务器里面，是不会存在找不到资源的情况，因为页面的入口始终都是 example.com/rootpath/ 其他资源都是根据这个路径来索引的。
​
但是对于 history 方式的前端路由项目，打包了以后，扔在各种静态资源服务器中，是没有办法正常使用的。​
刨根问底
你如果之前有类似的经历，那么你肯定上网找过解决方案。网上一找，会有很多教你怎么配置的“攻略”，但是都是流于表面，根本不告诉你为什么这么用，这么用的原理是什么，这么用究竟是要解决什么问题。

弄懂了原理，我们才能对症下药，才能在任何静态资源服务器中都能舒服的使用我们的 history 路由。

首先，我们来探求，为什么找不到资源的原因。

因为我们一般都是打包以后放在静态资源服务器中的，我们访问诸如 example.com/rootpath/ 这种形式的资源没问题，是因为，index.html 文件是真实的存在于 rootpath 文件夹中的，可以找到的，返回给前端的。
​

但是如果访问子路由 example.com/rootpath/login 进行登录操作，但是 login/index.html 文件并非真实存在的文件，其实我们需要的文件还是 rootpath 目录中的 index.html 。
​

再者，如果我们需要 js 文件，比如登陆的时候请求的地址是 example.com/rootpath/login/js/dist.js 其实我们想要的文件，还是 rootpath/js/ 目录中的 dist.js 文件而已。
​

前端路由其实是一种假象，只是用来蒙蔽使用者而已的，无论用什么路由，访问的都是同一套静态资源。
​

之所以展示的内容不同，只是因为代码里，根据不同的路由，对要显示的视图做了处理而已。
​

我相信，说到这里，聪明的童鞋，应该就想明白了，我们该怎么做，才能做到 history 模式的前端路由打包以后照样能用了。
​
那就是，一旦匹配子路径，发现 404 了，直接将路径中的子目录移除掉，返回根目录种对应的文件即可。

这么说，可能有点拗口，举几个例子，可能就比较好理解了。
比如要找 example.com/rootpath/login 静态资源服务器找不到，那就返回 example.com/rootpath/ 内容；要找 example.com/rootpath/login/css/style.css 找不到，那就照着 example.com/rootpath/css/style.css 这个路径去找。
​
总之就是，请求的是子目录，找不到，那就返回根目录一级对应的资源文件就好了。
​

理是这个理，但是该如何配置呢？
​

别急，接下来，就将几种常见的情况下，该如何配置，保证 history 前端路由也能正常使用。

在 nginx 中使用
如果你打包以后的前端静态资源文件，想要仍在 nginx 中使用，那首先将你打包好的静态资源目录扔进 www 目录，比如你打包好的资源的目录叫 rootpath ，那么直接将 rootpath 整个目录丢进 www 目录即可。

然后打开我们的 nginx 配置文件 nginx.conf，插入以下配置：

location /rootpath/ {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /rootpath/index.html;
}


server {
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        //在vue官方文档中，history模式主要添加下面这句话即可
		try_files $uri $uri/ /index.html;
    }
}


server {
        listen  80;
        server_name  xxx.com  ;
        proxy_set_header Host $proxy_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_ssl_session_reuse off;
        proxy_ssl_server_name on;
        proxy_ssl_name $proxy_host;
             add_header 'Access-Control-Allow-Origin' '*';
             add_header 'Access-Control-Allow-Headers' '*';
             add_header 'Access-Control-Allow-Methods' '*';
        location / {
                alias /nginx-jqb-marketing/ ;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
        }
        location /manager {
                alias /nginx-jqb-marketing/ ;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
        }                
      location /index.php {
                proxy_pass https://myscrm-test-yxx.xxx.com;
        }

        location /bff {
                proxy_pass https://myscrm-test-yxx.xxx.com/bff;
        }



}

直接都指定到这个目录下也可以

root /data/var/www/service/some-microservice;
index index.html;
location / {
            try_files $uri $uri/ /index.html;
        }

#号后面的都是代码里面的路由了
在这里插入图片描述
实际nginx里面没有这个目录
在这里插入图片描述

智搜的一个大坑，配置之后一直无法访问，后来调整后的配置

    server {
        listen 80;
        server_name localhost;
        root /data/var/www/service/nginx-search-admin;
        index  index.html;

        location ~ \.(htm|html|xml)$ {
            #add_header Cache-Control no-cache,no-store,must-revalidate,private,max-age=0;
            add_header Cache-Control no-cache;
        }

        location ~ \.(ico)$ {
            add_header Cache-Control public,max-age=604800;
        }

        location ~ \.(bmp|css|flv|gif|jpe?g|js|png|svg|swf)$ {
            add_header Cache-Control public,max-age=31536000;
        }

        # default
        location ^~/admin {
		alias /data/var/www/service/nginx-search-admin/;
		    index  /index.html;
            try_files $uri $uri/ /admin/index.html;
        }

        # deny
        location ~ /\.(env|env.example|git|ht|svn) {
            deny all;
        }
    }

在执行helm命令的时候碰到了大坑，因为yaml里面必须是空格，不能有tab格式，后来一个一个去还原然后按空格敲出来才成功

        # default
        location ^~/main {
        alias /data/var/www/service/nginx-ydxs-app/;
        index  index.html index.htm index.php;
        try_files $uri $uri/ /web/index.html;
        }		
        # default
        location ^~/web {
        alias /data/var/www/service/nginx-ydxs-app/;
        index  index.html index.htm index.php;
        try_files $uri $uri/ /web/index.html;
        }

        # default
        location ^~/jslocal {
        alias /data/var/www/service/nginx-ydxs-app/;
        index index.html index.htm index.php;
        try_files $uri $uri/ /web/index.html;
        }

yaml语言特性归纳如下

1、大小写敏感

2、使用缩进表示层级关系

3、禁止使用tab缩进，只能使用空格键

4、缩进长度没有限制，只要元素对齐就表示这些元素属于一个层级

5、使用#表示注释

6、字符串可以不用引号标注

YAML 支持以下常用几种数据类型：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/411747.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

JVM运行时数据区的必备知识：Java程序员不容错过

JVM运行时数据区的必备知识：Java程序员不容错过

1、JVM运行时数据区概念 JVM运行时数据区是Java虚拟机在执行Java程序时所使用的内存区域。这些区域包括了以下几个部分： 程序计数器（Program Counter Register）：程序计数器是一块较小的内存区域，它可以看作是当前线程…
阅读更多...
测试1号位的自我修养

测试1号位的自我修养

作者：京东零售 吴聪 引言 目前京东实行BigBoss机制以及积木型组织，同时现阶段再次强调了“经营”理念，以上均是比较大的组织层面的纲领和引导，核心是为了激发大家owner意识可以更好更快为公司产出价值和贡献。落到具体执行层面&…
阅读更多...
国内大模型领域进入乱战时代

国内大模型领域进入乱战时代

国内大模型领域进入乱战时代 2023.4.12版权声明：本文为博主chszs的原创文章，未经博主允许不得转载。 什么是大模型 大模型，又称为预训练模型、基础模型等，是指模型参数数量很大，需要大量计算资源才能训练的深度学习…
阅读更多...
RHCE-Web服务器

RHCE-Web服务器

请给openlab搭建web网站​ 网站需求：​ 1.基于域名[www.openlab.com](http://www.openlab.com)可以访问网站内容为 welcome to openlab!!! 首先创建一个名为openlab的网站： （1）在www目录下创建一个openlab文件夹：mk…
阅读更多...
Android UI

Android UI

什么是 UI 用户界面（User Interface，简称 UI，亦称使用者界面）是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。软件设计可分为两个部分：编码设计与UI设计。A…
阅读更多...
JavaScript编程实现tab选项卡切换的效果+1

JavaScript编程实现tab选项卡切换的效果+1

之前在“圳品”信息系统使用了tab选项卡来显示信息&#xff0c;详见&#xff1a; JavaScript编程实现tab选项卡切换的效果 在tab选项卡中使用其它<div>来显示信息就出现了问题&#xff0c;乱套了&#xff0c;比如下面的这段代码&#xff1a; <!DOCTYPE html> &l…
阅读更多...
c/c++:for循环语句，分号不可省略，表达式可以省略，猜数字游戏，跳转语句continue，break，避免写goto

c/c++:for循环语句，分号不可省略，表达式可以省略，猜数字游戏，跳转语句continue，break，避免写goto

c/c:for循环语句&#xff0c;分号不可省略&#xff0c;表达式可以省略&#xff0c;猜数字游戏&#xff0c;跳转语句continue&#xff0c;break&#xff0c;避免写goto 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;此时学…
阅读更多...
树莓派 QT项目开机自启动

树莓派 QT项目开机自启动

我自己用qt设置了一个界面&#xff0c;如何让他开机自启动呢&#xff1f; 目录 1.生成qt项目的可执行文件 2. 编写一个自启动脚本 3.重启树莓派 1.生成qt项目的可执行文件 QT项目的可执行文件就是.exe文件。首先在qt中打开&#xff0c;点击红色方框图标&#xff0c;选择Re…
阅读更多...
vue+springboot 上传文件、图片、视频，回显到前端。

vue+springboot 上传文件、图片、视频，回显到前端。

效果图 预览&#xff1a; 视频&#xff1a; 设计逻辑 数据库表 前端vue html <div class"right-pannel"><div class"data-box"><!--上传的作业--><div style"display: block" id""><div class"tit…
阅读更多...
C++编程法则365条一天一条（359）认识各种初始化术语

C++编程法则365条一天一条（359）认识各种初始化术语

文章目录Default initialization默认初始化Copy initialization拷贝初始化Aggregate initialization聚合初始化Direct initialization直接初始化list_initialization列表初始化value_initialization值初始化参考&#xff1a; https://en.cppreference.com/w/cpp/language/copy_…
阅读更多...
【unity learn】【Ruby 2D】角色发射飞弹

【unity learn】【Ruby 2D】角色发射飞弹

前面制作了敌人的随机运动以及动画控制&#xff0c;接下来就是Ruby和Robot之间的对决了&#xff01; 世界观背景下&#xff0c;小镇上的机器人出了故障&#xff0c;致使全镇陷入了危机&#xff0c;而Ruby肩负着拯救小镇的职责&#xff0c;于是她踏上了修复机器人的旅途。 之前…
阅读更多...
同步I/O实现Reactor和Proactor的差异

同步I/O实现Reactor和Proactor的差异

有两种高效的事件处理模式&#xff1a;Reactor模式和Proactor模式 Reactor模式 主线程只负责监听socket上是否有事件发生&#xff0c;当有事件发生时&#xff0c;主线程就将该事件放进请求队列&#xff0c;通知工作线程进程处理&#xff1b;主线程不做实质性的工作&#xff0c…
阅读更多...
使用颜色检测有向图中的循环

使用颜色检测有向图中的循环

给定一个有向图，检查该图是否包含循环。如果给定的图形至少包含一个循环，您的函数应返回 true，否则返回 false。 例子： 输入： n = 4, e = 6 0 -> 1, 0 -> 2, 1 -> 2, 2 -> 0, 2 -> 3, 3 -> 3 输出：是 解释： <
阅读更多...
计网之HTTP协议和Fiddler的使用

计网之HTTP协议和Fiddler的使用

文章目录一. HTTP概述和fidder的使用1. 什么是HTTP2. 抓包工具fidder的使用2.1 注意事项2.2 fidder的使用二. HTTP协议格式1. HTTP请求格式1.1 基本格式1.2 认识URL1.3 方法2. 请求报头关键字段3. HTTP响应格式3.1 基本格式3.2 状态码一. HTTP概述和fidder的使用 1. 什么是HTT…
阅读更多...
VueRouter路由模式解析

VueRouter路由模式解析

VueRouter路由模式解析 前端路由的实现方式主要有两种&#xff1a;hash模式和history模式。 hash模式 在window.location对象中有一个hash字段&#xff0c;可以获取地址栏中#字符及后边的所有字符。 hash也称作锚点&#xff0c;本身是用来做页面定位的&#xff0c;可以使对…
阅读更多...
BGP联邦实验

BGP联邦实验

实验目的&#xff1a; 实验拓扑&#xff1a; IP地址规划&#xff1a; AS2内部&#xff1a; 172.16.0.0/16 172.16.0.0/24---P2P网络 172.16.1.0/24----MA网络 172.16.1.0/29 172.16.1.8/29 172.16.1.16/29 172.16.1.24/29 172.16.1.32/29 172.16.1.40/29 172.16.2.0/24--…
阅读更多...
Golang每日一练(leetDay0032) 二叉树专题（1）

Golang每日一练(leetDay0032) 二叉树专题（1）

目录 94. 二叉树的中序遍历 Binary Tree Inorder Traversal &#x1f31f; 95. 不同的二叉搜索树 II Unique Binary Search Trees II &#x1f31f;&#x1f31f; 96. 不同的二叉搜索树 Unique Binary Search Trees &#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷…
阅读更多...
基于 FPGA+DSP 的冲击波超压测试系统设计与实现-系统测试（二）

基于 FPGA+DSP 的冲击波超压测试系统设计与实现-系统测试（二）

5 系统功能测试及仿真 在完成系统硬件电路板的设计和软件程序的开发后&#xff0c;本章分别对 A/D 采集模块、 DDR3 SDRAM 存储模块的读写波形进行了测试&#xff0c;并对千兆网卡传输模块通过 Wireshark 软件进行抓包测速&#xff0c;调试成功并确认无误后将各模块组装起来对系…
阅读更多...
Unity之ASE实现根据ScreenPosition改变渲染效果

Unity之ASE实现根据ScreenPosition改变渲染效果

前言 我们知道ScreenPosition节点，代表了屏幕空间的坐标，那么它有哪些用处呢？今天我们就来给大家演示一个效果，如下图所示：我们拉远拉进摄像机的位置，任务的渲染会根据不同距离有一定变化。 ScreenPosition介绍 Screen Position 节点输出当前像素的屏幕位置。根据所选…
阅读更多...
7nm+跨域计算+极致性价比，这家芯片厂商助攻车企「降本增效」

7nm+跨域计算+极致性价比，这家芯片厂商助攻车企「降本增效」

汽车芯片赛道的「卷」&#xff0c;或许超出了所有人的预期。对于单纯TOPS算力的比拼&#xff0c;已经翻篇&#xff0c;如何让车企有的用&#xff0c;用得上&#xff0c;还要用得好&#xff0c;已经是新风向。 实际上&#xff0c;在汽车智能化刚刚开始的2018年&#xff0c;彼时类…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023