使用nginx实现一个端口和ip访问多个vue前端

前言:由于安全组要求,前端页面只开放一个端口,但是项目有多个前端,此前一直使用的是一个前端使用单独一个端口进行访问,现在需要调整。

需要实现:这里以80端口为例,两个前端分别是:project1,project2。

例如:访问项目1:192.168.1.10:80/project1

访问项目2:192.168.1.10:80/project2

需要的配置:1、nginx配置;2、vue前端代码修改

1、nginx配置

server {listen       80;server_name  localhost;charset utf-8;# 配置默认访问前端location / {root /usr/local/html/project1/dist/;index index.html index.htm;try_files $uri $uri/ /index.html;}# 项目2前端location /project2{alias /usr/local/html/project2/dist/;index index.html;try_files $uri $uri/ /project2/index.html;}# 项目1前端location /project1{alias /usr/local/html/project1/dist/;index index.html;try_files $uri $uri/ /project1/index.html;}# 项目1-api接口地址代理location /project1-prod-api/ {if ($request_method = OPTIONS ) {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;add_header Access-Control-Allow-Headers *;return 200;}proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_buffer_size 128k;proxy_buffers 32 32k;proxy_busy_buffers_size 128k;proxy_pass http://192.168.1.10:8080/;}# 项目2-api接口地址代理location /project2-prod-api/ {if ($request_method = OPTIONS ) {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;add_header Access-Control-Allow-Headers *;return 200;}proxy_redirect off;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_buffer_size 128k;proxy_buffers 32 32k;proxy_busy_buffers_size 128k;proxy_pass http://192.168.1.10:8081/;}
}

2、vue前端代码修改

两个项目的vue代码均要修改

修改文件:在项目根目录:.env.production

# 页面标题
VUE_APP_TITLE = 某某平台# 生产环境配置
ENV = 'production'# 生产环境
VUE_APP_BASE_API = '/project1-prod-api'

在项目根目录:vue.config.js

修改publicPath参数

3、验证修改

重新打包构建vue前端代码,修改nginx配置,并重启nginx,防火墙允许nginx配置的端口。

 

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

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

相关文章

AI 驱动下的一体化分布式数据库:滴滴、快手、中国恩菲、好未来、翼鸥教育共话创新应用实践|OceanBase Meetup 精彩回顾

7月6日,OceanBase Meetup 北京站——“AI 驱动下的一体化分布式数据库:跨行业多场景的创新应用与实战”举办。来自滴滴、快手、中国恩菲、好未来、翼鸥教育、蚂蚁集团及OceanBase等众多行业技术专家与资深用户,围绕众多用户关注的AI 与数据库…

物联网mqtt网关搭建背后的技术原理

前言 物联网是现在比较热门的软件领域,众多物联网厂商都有自己的物联网平台,而物联网平台其中一个核心的模块就是Mqtt网关。这篇文章的目的是手把手教大家写书写一个mqtt网关,后端存储支持Kafka/Pulsar,支持mqtt 连接、断链、发送…

Zabbix监控系统:zabbix服务部署+基于Proxy分布式部署+zabbix主动与被动监控模式

一、Zabbix概述 1.1 简介 zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。 zabbix 能监视各种网络参数,保证服务器系统的安全运营,提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 zabbix…

中文之美:每日成语【瓜田李下】

文章目录 引言瓜田李下相关谜语成语接龙引言 中文之美,美在诗词歌赋,美在绝句华章,也美在对事物名称的雅致表达。 瓜田李下 拼音:guā tin lǐ xi 释义 1.经过瓜田时弯腰提鞋,经过李子树下时抬手扶帽,容易被人怀疑是偷瓜、偷李子。 2.比喻嫌疑之地。 出处:三国曹植…

AGI 之 【Hugging Face】 的【从零训练Transformer模型】之二 [ 从零训练一个模型 ] 的简单整理

AGI 之 【Hugging Face】 的【从零训练Transformer模型】之二 [ 从零训练一个模型 ] 的简单整理 目录 AGI 之 【Hugging Face】 的【从零训练Transformer模型】之二 [ 从零训练一个模型 ] 的简单整理 一、简单介绍 二、Transformer 1、模型架构 2、应用场景 3、Hugging …

基于微信小程序+SpringBoot+Vue的校园自助打印系统(带1w+文档)

基于微信小程序SpringBootVue的校园自助打印系统(带1w文档) 基于微信小程序SpringBootVue的校园自助打印系统(带1w文档) 管理信息可以处理复杂的信息从而提高用户的工作效率,减少失误。所以本基于Vue和微信小程序的校园自助打印系统的开发非常有意义,本系…

科研绘图系列:R语言TCGA分组饼图(multiple pie charts)

介绍 在诸如癌症基因组图谱(TCGA)等群体研究项目中,为了有效地表征和比较不同群体的属性分布,科研人员广泛采用饼图作为数据可视化的工具。饼图通过将一个完整的圆形划分为若干个扇形区域,每个扇形区域的面积大小直接对应其代表的属性在整体中的占比。这种图形化的展示方…

博客建站4 - ssh远程连接服务器

1. 什么是SSH?2. 下载shh客户端3. 配置ssh密钥4. 连接服务器5. 常见问题 5.1. IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! 1. 什么是SSH? SSH(Secure Shell)是一种加密的网络协议,用于在不安全的网络中安全地远程登录到其他…

算法-选择排序

选择排序实现 以下是用kotlin写的选择排序。 让我们来一行行地分析。我会先摘出代码片段,然后给出解释。 这个外层的循环代表每一轮检查。在一轮检查之初,我们会先记住目前的最小值的索引。 因此每轮开始时lowestNumberIndex都会是该轮的起点索引i。注意…

PHP框架简介

PHP是一种广泛使用的开源脚本语言,主要用于Web开发,它可以创建动态交互式Web页面。而PHP框架则是一套用于开发Web应用程序的工具和库的集合,它可以帮助开发者更高效地编写PHP代码,提高开发速度和代码的可维护性。 理解PHP框架&am…

系统架构设计师教程 第4章 信息安全技术基础知识-4.1 信息安全基础知识-解读

系统架构设计师教程 第4章 信息安全技术基础知识-4.1 信息安全基础知识 4.1.1 信息安全的概念4.1.1.1 信息安全的范围4.1.1.1.1 设备安全4.1.1.1.2 数据安全4.1.1.1.3 内容安全4.1.1.1.4 行为安全 4.1.2 信息存储安全4.1.2.1 信息使用的安全4.1.2.1.1 用户的标识与验证4.1.2.1.…

(C++) 文件读写基础

文章目录 🗂️前言📄ref📄访问标记🗃️流打开模式类型 🗂️Code📄demo📄分点讲解🗃️打开/关闭🗃️写🗃️读🗃️状态函数 🗂️END&…

【YOLOv10[基础]】热力图可视化实践① | 支持视频热力图 | 密度热力图 | 论文必备

本文将进行添加YOLOv10版本的热力图可视化功能的实践,支持视频的热力图可视化。 目录 一 热力图可视化实践① 1 代码 2 效果图 在论文中经常可以见到提取的物体特征以热力图的形式展示出来,将特征图以热力图的方式进行可视化在深度学习中有以下的原因: ①强调激活区域 ,…

【大数据专题】数据仓库

1. 简述数据仓库架构 ? 数据仓库的核心功能从源系统抽取数据,通过清洗、转换、标准化,将数据加载到BI平台,进而满足业 务用户的数据分析和决策支持。 数据仓库架构包含三个部分:数据架构、应用程序架构、底层设施 1&…

MongoDB教程(十八):MongoDB MapReduce

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、MapRed…

LeetCode 算法:分割回文串 c++

原题链接🔗:分割回文串 难度:中等⭐️⭐️ 题目 给你一个字符串 s,请你将 s 分割成一些子串,使每个子串都是 回文串 。返回 s 所有可能的分割方案。 示例 1: 输入:s “aab” 输出&#xff…

PHP银行卡实名认证接口对接、银行卡识别

在这个数字时代,每一张银行卡都承载着你的故事,它是你辛勤汗水的见证,是你生活品质的保障。就像你的身份证一样,银行卡也需要“实名认证”,这不仅仅是一次信息的匹配,更是对个人财产安全的一份承诺。 随着…

docker大全

1. 简述什么是 Docker 容器? Docker 容器 在应用程序层创建抽象并将应用程序及其所有依赖项打包在一起。这使我们能够快速可靠地部署应用程序。容器不需要我们安装不同的操作系统。相反,它们使用底层系统的 CPU 和内存来执行任务。这意味着任何容器化应…

云计算安全技术介绍

云计算安全技术介绍 安全概述物理安全基础设施安全网络安全网络安全威胁防火墙ACLIDS 入侵检测系统IPS 入侵预防系统VPNSSLSSL VPNSSHHTTPSCHAP 询问握手认证协议数字签名数据安全虚拟化安全管理安全安全概述 安全是指不因人、机、媒介的相互作用而导致系统损失、人员伤害、任…

【系列专题】新质生产力之光,照亮“制造强国”之路

随着科技的不断进步和全球化的深入发展,新质生产力已经成为推动现代社会经济发展的重要力量。在新质生产力布局中,改造提升传统产业是重要内容之一。中国制造业总体规模连续14年保持全球第一,新质生产力的加快发展,将加速推动我国…