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

于 2024-05-31 10:32:50 发布
阅读量963 收藏 9
点赞数 6
分类专栏： 部署 文章标签： nginx vue.js apache
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chang100111/article/details/139344519
版权

需求：由于一些因素限制，需要尽可能的少开放外部端口访问，这里将多个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

最低0.47元/天 解锁文章
Nginx -Web服务器/反向代理/负载均衡
qq_35911309的博客
07-10 1599
Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的。从2004年发布至今，凭借开源的力量，已经接近成熟与完善。Nginx功能丰富，可作为HTTP服务器，也可作为反向代理服务器，邮件服务器。
Vue2+Node.js前后端分离项目部署到云服务器
SongD1114的博客
04-15 5997
Vue2+Node.js前后端分离项目部署到云服务器
nginx配置多个vue项目
09-30
主要介绍了nginx配置多个vue项目的方法以及流程介绍，对此有需要的朋友参考下。
Nginx一个Server代理多个Vue项目
lhp3000的博客
12-10 2005
### Nginx一个Server代理多个Vue项目 #### 配置Vue项目 * **配置vue.config.js的outputDir和publicPath属性** ``` module.exports = { outputDir: 'quilt', // 打包输出的目录名称 publicPath: '/quilt', //index.html文件 资源的引用路径前缀 // …… 其他配置省略 } ``` 输入如下图： * **配置Vue Rou...
Nginx同一端口下部署多个vue项目
qq_49206255的博客
03-18 1497
Vue项目打包后就变成了静态界面，在代码中动态配置的代理是不生效的，要注意默认配置。除了vue.config.js文件配置需要注意外，还有两个文件需要特别对待，分别是src-main.js、src-router-index.js文件，分别如图所示。跨域配置是根据配置进行拼接地址访问的，要注意请求后面的“/”，和跳转地址后的“/”，到现在重启nginx就可以访问了。根据不同项目的vue部署需求，可以在同一地址下的同一端口进行配置，配置完毕就可以访问vue前端项目了。在同一ip同一端口下部署一个vue项目。
nginx配置同一域名同一端口下部署多个vue项目
strggle_bin的博客
04-18 1722
调整完毕后，直接执行build打包命令，可以发现index.html引入js路径增加了/project。在vue.config.js文件中修改publicPath路径为/project/在router文件夹中index.js文件中修改base为 ‘/project/’如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.默认端口就只有一个，有多个项目需要部署到同一端口下。根据根路径不同分别代理访问不同项目。
nginx配置多vue项目
withme977的博客
04-02 1150
多个vue项目用nginx部署
Vue项目部署：深入理解Nginx与反向代理
本文全面探讨了Vue项目在Nginx服务器上的部署与优化，从基本原理到安全配置，再到监控与维护，提供了详尽的实践指导。首先介绍了Nginx的工作原理和基本配置，为后续的反向代理和静态资源处理奠定
前端应该会的nginx代理（windows）
m0_67402096的博客
07-29 299
Nginx是一个很强大的高性能web和反向代理服务。
使用nginx部署多个vue项目,亲测有效(使用域名https方式访问)
qq_42643690的博客
02-01 2241
1.修改nginx.conf配置 server { listen 443 ssl; server_name 你的域名; #ssl on; # 开启ssl证书访问 ssl_certificate ./1_bundle.crt; #你的证书crt文件地址 ssl_certificate_key ./2_.key; #你的证书key文件地址 ssl_session_timeout 60m; # session有效时间10分钟 #ssl_protocols TLSv1 TLS
nginx部署vue项目：多个项目、相同的端口下
~牧马~
07-11 3049
nginx部署vue项目单个或多个 首先，你得有一台服务器，并配置好nginx后，开始部署。 操作命令： 第一步： cd /home/local/nginx //#切换到nginx存放（安装）的位置 第二步; 第二步： ll #打印nginx下的所有文件及文本，你会看到 `conf` `sbin`这两个文件， 第三步： 第三步： cd conf #切换到conf文件，看到fastcgi.conf fastcgi.conf.default #fastcgi_pa
Nginx 部署多个 VUE 项目（相同IP、相同端口、不同上下文路径）
Rambo's Blog
03-08 3882
文章目录一、场景描述二、解决方案1、前端项目配置2、代理服务配置 一、场景描述   在前后分离的项目开发中，前端项目开发人员对 vue 项目的打包一般都是采用默认根目录访问的。如果多个前端项目都采用根目录的方式访问，分别部署在不同的服务器或者同一个服务器的不同端口，那通过 Nginx 代理的方式还很好解决。但是如果必须在同一个 IP 相同端口下，通过访问的上下文路径来区分，那么就是一个比较棘手的问题。   接下来的操作就是带领有以上困惑的开发人员来处理此类问题。 二、解决方案 1、前端项目配置 修改 v
Nginx的设置以实现多个Vue项目的history模式
qq_29427541的博客
12-09 394
通过不同路径访问不同的项目，并且每个vue项目均是history模式。以实现不同的路径重定向不同的路径下，nginx的代码是。有几个设置几个就好了。
服务器上的nginx 部署多个前端vue项目（不同端口）
小懒魔王的博客
01-27 4834
部署nginx可参考：https://blog.csdn.net/qq_59716333/article/details/121590065?spm=1001.2014.3001.5501 当需要部署多个前端项目时，/usr/local/nginx/conf/nginx.conf的配置如下 其中示例为两个项目 test2和vueadmin 效果为 http://****:8080 http://****:8081 利用两个server使用两个端口进行部署 #user nobody; wo
nginx部署vue项目（包括一个nginx部署多个vue项目）
guoyp2126的博客
09-17 9697
在nginx部署vue项目，含同一端口号下，配置多个vue项目
nginx配置解决跨域
jefferylong的博客
09-09 679
server{ listen 9999; #服务器接口端口 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; # location / { # root html; # index index.html index.htm; # } .
nginx部署多个vue项目，不同端口号下
~牧马~
07-22 4057
nginx部署多个vue项目，不同端口号下是否连接上云服务器进入nginx文件下进入 nginx.conf 文件并配置第一个项目第一个项目配置第二个项目配置将创建的后缀 `.conf` 引入主后置 `.conf` 中欢迎在评论区交流！！！！ 下面笔者会写出一份详细的操作及配置流程，供大家参考学习！ 这里，是有一台“云服务器”（笔者的是华为云服务器），一款“Xshell”借助它来操作服务器，一款“Xftp”借助它来给服务器相对的位置上传项目文档，不知道的，可以通过点击进去查看，里面有各自详细的使用教程。v
vue项目怎么打包部署到服务器
最新发布
03-30
### Vue.js 项目的打包与部署教程 #### 1. 打包过程 为了将 Vue.js 应用程序准备好用于生产环境，需要将其构建为静态资源文件。这可以通过执行 `npm run build` 命令来完成。此命令会基于项目中的配置生成优化过的静态资产文件，通常位于 `dist/` 目录下[^1]。 如果需要自定义打包行为，可以编辑或新增 `vue.config.js` 文件来进行特定设置。例如，指定输出路径、调整公共路径（publicPath）、启用 Gzip 压缩等功能都可以在此处实现[^4]。 以下是简单的 `vue.config.js` 配置示例： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-path/' : '/', outputDir: 'dist', assetsDir: 'static' }; ``` #### 2. 部署至服务器 一旦完成了打包操作，下一步就是将这些静态文件部署到目标 Web 服务器上。常见的选择包括 Nginx 和 Apache；对于 Java 生态系统的用户来说，也可以考虑 Tomcat 作为容器运行服务[^2]。 ##### 使用 Nginx/Apache 进行部署 当选用像 Nginx 或者 Apache 的 HTTP 服务器时，主要任务是对它们进行适当配置以便能够正确提供来自 `dist/` 文件夹内的内容给客户端访问。 Nginx 示例配置如下所示： ```nginx server { listen 80; server_name example.com; root /path/to/dist/; index index.html; location / { try_files $uri /index.html; # 支持单页应用路由模式 } } ``` ##### 利用 Tomcat 实现部署 针对希望借助于 Servlet 容器如 Tomcat 来承载其前端工程的情况，则需把整个 dist 文件夹复制粘贴进入 tomcat/webapps 下面的一个新目录里去[^3]^。接着启动或者重启 Tomcat 即可使得该站点生效。 注意，在某些情况下可能还需要修改默认端口号以及处理跨域请求等问题。 #### 总结 综上所述，无论是采用传统的反向代理型 web-server (比如 nginx/apache)，还是嵌入式的 servlet-container(tomcat)，都需要先经过有效的本地测试之后再正式上线发布。同时也要关注安全性和性能调优等方面的工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值