nginx配置vue项目添加访问前缀

news2024/11/20 7:11:11

文章目录

  • 前言
  • 实现需求
  • Nginx配置访问前端
    • 正确配置
    • 注意点
      • alias的含义
      • 举个栗子
      • 静态文件及js等404错误

前言

最近,在搞一个SASS系统,将原有的单服务,每次卖出一套啥软件就需要部署一套环境,使得运维人员有些捉襟见肘。产品调整为SASS,旨在为了将运维的工作减轻。

实现需求

功能实现完成了,就需要为每个租户配置自己的租户访问地址,其实最后指向的都是一套服务及页面!

实现的需求:就是通过访问如下地址:
http://192.168.0.118:38888/current_juser

其实也很好理解, 我们后台映射的前端页面地址就是IP+端口,如上http://192.168.0.118:38888

现在想通过在加上后面的current_juser来实现访问后端页面。

Nginx配置访问前端

正确配置

   server {
        listen       38888;
        server_name  localhost;
        location /current_juser{
          alias  /home/deploy/operate/dist/;
          index  index.html index.htm;
        }
        location ~.*(js|css|png|gif|jpg|mp3|ogg)$ {
          root /home/deploy/operate/dist/;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }   

上面是我们的正确配置,接下来我们看一下注意点

注意点

在这里插入图片描述
从上图中,我们看到了两个红色框框圈中的内容,我们来看一下具体的内容:

alias的含义

Nginx他指定文件路径是有两种方式root和alias来实现的,这两者的用法区别在于对URI的处理方法不同。

要讲到alias那么就必须说一下他和root的区别:
1、alias是一个目录别名的定义,root则是最上层目录的定义。
2、还有一个重要的区别是alias后面必须要用“/”结束,否则会找不到文件的。而root则可有可无。

举个栗子

alias:

location /testAlias/{
	alias /tools/nginx/html/admin/;
}

这个配置的意思就是访问/testAlias/目录里面的文件时,ningx会自动去/tools/nginx/html/admin目录找文件。

root:

location /testRoot/ {
	root /tools/nginx/html/admin;
}

#若按照这种配置的话,则访问testRoot/目录下的文件时,nginx会去/tools/nginx/html/admin/testRoot下找文件。

静态文件及js等404错误

第二个红框就是帮我们解决这个404的问题,如果我们没有配置此信息,则会造成js或者css等静态文件的404,导致我们的页面无法正常打开。

我们看一下如果不配置的错误提示,如下:

在这里插入图片描述
我们将鼠标放在右侧的ip处,可以看到错误信息,在上面会显示页面访问的完整路径。提示我们找不到这个文件。

通过添加红框内的配置,location说明如果你要访问js,png,css等结尾的文件,你需要在你的访问路径前加上root。

这个root实际上就是替换了网页上的http://192.168.0.118:38888。如果加了这个location,那么网页在访问http://192.168.0.118:38888/xxx/xxx/xxx.js。这个路径的时候,因为文件结尾是js匹配到了这个location,然后网页就会访问

root+[匹配路径],即为: /home/deploy/operate/dist/xxx.js,这样就找到文件了。

欢迎大家点击下方卡片,关注《coder练习生》

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

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

相关文章

链表理论基础

链表是一种通过指针串联在一起的线性结构,每一个节点由两部分组成,一个是数据域,一个是指针域(存放指向下一节点的指针)。 链表的类型 单链表 每一个节点由两部分组成,一个是数据域一个是指针域&#xf…

汽车 EDI:博泽 brose EDI 需求分析

brose(博泽)是一家德国汽车零部件制造商,总部位于德国科堡。该公司成立于1908年,至今已有百年历史。brose主要专注于汽车驾驶员控制系统、座椅系统、电动驱动系统和电子技术等领域的开发和生产。作为一家全球化企业,br…

linux修改root密码

Linux修改root密码 红帽系统: 进入开机界面按e。 在linux这行末尾加上rd.break 然后按下ctrlx 按下图输入命令: redhat 即为你想修改的密码。 然后回车等待系统重启。 CentOS7: 前两步和之前一样,然后找到linux16这一行。 在这行末尾…

芯片设计中的功耗挑战和低功耗设计

在早期的IC设计中,关注的参数主要是性能(timing)和面积(area)。EDA工具在满足性能要求的情况下,最小化面积。此时,功耗是一个不怎么被关心的问题。 因为CMOS工艺在相对较低的时钟频率下具有相当低的功耗,漏电流可忽略不计。随着晶…

springboot+vue校园车辆校车调度管理系统_r4le2-

本论文中实现的校车调度管理系统将以用户核心的日常信息维护工作为主,主要涵盖了首页,个人中心,驾驶员管理,车辆信息管理,借调车辆管理,车辆调度管理,车辆运营管理等功能,采用该校车…

浏览器如何捕获元素的hover事件弹出的内容,并进行样式调整修改

项目场景: 最近前端需要重写antd的tab卡片的更多内容弹框,默认的背景色和文本颜色不合适,需要更改。 问题描述 只有鼠标指针放上去后才会显示弹出的内容 直接用审查元素还无法进行获取。 如何用浏览器的开发者工具去捕获这些浮框内容或其他…

js中的图是什么?

图 什么是图? 图是网络结构的抽象模型,是一组由边连接的节点。图可以表示任何二元关系,比如道路、航班等。在 JavaScript 中没有图,但是可以通过 Object 和 Array 来构建图。 常用操作 深度优先遍历广度优先遍历 图的表示法 …

sql内外连接图示

student表数据: idname34name22golitter66kerwin123yh12golemon score表数据: idscore34802298663345100 内连接 1、内连接:俗称左右拼接连接; 2、内连接特点:满足连接条件的才会出现在结果里面; SELECT 查询字段…

第 7 章 集合-----Scala集合继承图

7.1.1 不可变集合继承图 7.1.2 可变集合继承图 7.2.3 不可变数组与可变数组的转换 7.7.6 复杂 WordCount 案例 1)方式一 object TestWordCount {def main(args: Array[String]): Unit {// 第一种方式(不通用)val tupleList List(("H…

WebRTC的认知入门

一、学习目的 当前的音视频聊天功能很普通,社会对这方面的需求也很高,疫情期间的在线问诊模式解决类大量急需就医问诊患者的燃眉之急,我们需要了解WebRTC实现实时音视频聊天功能是如何操作的。 二、概念 什么是WebRTC?WebRTC是 Google 在…

开放式耳机是什么意思?开放式耳机和封闭式耳机区别又有哪些?

开放式蓝牙耳机的设计理念旨在为用户提供更加自然、开放的音频体验。与传统的封闭式耳机相比,开放式耳机的设计目的是最大程度地减少音频在耳道中的阻隔,使周围环境的声音与耳机音频混合在一起,创造更加逼真的音场感。 开放式蓝牙耳机非常适合…

6.3.2 可翻页检视

前面提到的 nl 与 cat, tac 等等,都是一次性的将数据一口气显示到屏幕上面。一页一页翻动的指令就是more和less。 more (一页一页翻动) 看到上面的范例,如果more后面接的文件内容行数大于屏幕输出的行数时,就会出现类…

Hello算法笔记之回溯

一、回溯算法介绍:一种通过穷举来解决问题的方法,它的核心思想是从一个初始状态出发,暴力搜索所有可能的解决方案,当遇到正确的解则将其记录,直到找到解或者尝试了所有可能的选择都无法找到解为止。 通常采用「深度优…

【论文阅读】【yolo系列】YOLACT Real-time Instance Segmentation

论文链接:https://arxiv.org/pdf/1904.02689.pdf Abstract 我们提出了一个简单的、全卷积的实时实例分割模型, 【速度和精度】该模型在TitanXp上训练MSCOCO数据集以33.5帧ps的速度达到29.8 mAP,比以往任何竞争方法都要快得多。此外&#xff0…

chatgpt赋能python:Python连接蓝牙模块:实现IoT设备的控制

Python连接蓝牙模块:实现IoT设备的控制 随着物联网技术的不断发展,连接设备的关键变得越来越重要。Python语言是一种灵活易用、快速上手的编程语言,已经成为众多物联网应用的首选编程语言之一。其中,Python连接蓝牙模块的应用越来…

【聚类算法】MeanShift算法

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 MeanShift算法,同样是一种基于密度的聚类算法。两种算法直观理解都比较好理解。 DBSCAN:向身边人逐渐发展下线模式 MeanShfit&…

【Unity 实用插件篇】 | UI适配神器 Device Simulator 移动设备模拟器 的详细使用方法

前言 【Unity 实用插件篇】 UI适配神器 Device Simulator 移动设备模拟器 的详细使用方法一、安装Device Simulator包二、使用Device Simulator模拟各种设备三、自定义设备类型信息 总结 🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由…

windowsVNC远程桌面连接虚拟机

准本环境关闭防火墙 systemct stop firewalld setenforce 0 iptables -F 第一步虚拟机安装VNC yum -y install tigervnc-server 第二步VNC密码 vncserver 查看vnc进程和ID windows客户端 下载 VNC 服务器 |VNC 连接 (realvnc.com)

开始商业太空飞行将推动维珍银河股价上涨

来源:猛兽财经 作者:猛兽财经 总结 (1)维珍银河宣布将在6月底开始商业太空飞行,这将成为该公司的一个重要里程碑事件。 (2)太空旅游飞行市场预计将在未来十年呈指数级增长,维珍银河…

如何在Windows中启用或禁用脱机文件

脱机文件是同步中心的一项功能,即使与服务器的网络连接不可用,用户也可以使用网络文件。 用户可以使用脱机文件(如果启用)使其网络文件始终脱机可用,以便在计算机上保留存储在网络上的文件副本。这使得用户即使在未连接到网络或服务器不可用的情况下也可以与他们一起工作…