Nginx一个端口代理多个vue项目,通过不同路由转到不同系统,反向代理Apache进行文件处理

需求:由于一些因素限制,需要尽可能的少开放外部端口访问,这里将多个vue项目通过一个nginx端口进行代理,由不同的路由来确定访问哪些项目,apache同理

nginx代理多个vue项目

安装和配置nginx的基础教程这里就不写了,网上一搜很多,遇到这个问题代表一些基础的nginx应用肯定没有问题,话不多说,开整:

  1. 首先我们需要调整vue的打包配置,涉及修改vue.config.js 和 router配置
    vue2 - webpack打包修改打包配置文件,修改项目的根路径,因为在nginx增加了一层这里也需要调整一下根路径,默认是/

    vue3 - vite打包需要修改vite.config.ts文件中内容,如果没引入ts就是vite.config.js

    修改router配置,不填写默认base是/,添加了以后会在所有的路由前面都加上/vehicle/,例如登录页面xxxx:8080/#/login会被代理为xxx:8080/vehicle/#/login
    mode:history代表history路由不再显示#

    注意:二者添加的内容必须相同,并且要保持和配置nginx的配置地址一致

  2. 修改nginx配置

    这里二级项目一定要使用alias来指定vue包路径

    nginx配置文件修改以后不要忘记使用 nginx -s reload重新加载一下配置文件,否则是不生效的

apache由nginx代理,与vue项目公用端口

这个修改起来比较简单,修改一下nginx的配置文件即可

这里/upload-download/ 改为你自己想要的路径即可

bash 复制代码
location /upload-download/ {
    # Apache服务器的地址
    proxy_pass http://127.0.0.1:7770/;
    # 传递请求头给Apache  
    proxy_set_header Host $host;  
    proxy_set_header X-Real-IP $remote_addr;  
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
    proxy_set_header X-Forwarded-Proto $scheme;
}

此时就可以通过xxxx:8080/upload-download/来访问apache

注意不要少写了反斜线,线上的如果加了ssl需要修改为https://127.0.0.1:7770/

今天就写到这里,有什么问题感谢评论或者私信指正,转发请注明出处

相关推荐
咖啡の猫11 分钟前
Vue收集表单数据
前端·javascript·vue.js
知识分享小能手20 分钟前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
_志哥_38 分钟前
多行文本超出,中间显示省略号的终极方法(适配多语言)
前端·javascript·vue.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 29 - readonly:数据保护实现
前端·javascript·vue.js
૮・ﻌ・1 小时前
Vue2(一):创建实例、插值表达式、Vue响应式特性、Vue指令、指令修饰符、计算属性
前端·javascript·vue.js
半生过往2 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
BumBle2 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
JA+3 小时前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js
似水流年QC4 小时前
Electron 实战|Vue 桌面端开发从入门到上线
vue.js·electron·桌面端
合作小小程序员小小店4 小时前
web网页开发,在线%考试,教资,题库%系统demo,基于vue,html,css,python,flask,随机分配,多角色,前后端分离,mysql数据库
前端·vue.js·后端·前端框架·flask