Nginx同一端口部署多个vue项目

本文介绍了如何在只有一个公网端口的情况下,将多个Vue前端项目部署到同一域名下,通过修改vue.config.js的publicPath和配置Nginx实现子系统的路由访问。详细步骤包括前端Vue项目的配置调整和Nginx的配置文件设置,使得可以分别访问不同的子系统。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景
大家在部署项目的时候会遇到,只申请了一个公网端口,但是需要将多个前端vue项目部署到同一域名同一端口下,下面记录一下vue打包时如何配置以及nginx如何配置
我们这个项目有多个vue工程,这多个vue的工程想部署到同一域名下,访问路由为如下所示:
门户:      http://10.28.118.115:28088/
子系统1:http://10.28.118.115:28088/xsdd
子系统2:http://10.28.118.115:28088/xctz
子系统3:http://10.28.118.115:28088/xcgxfw

前端项目配置:

修改vue.config.js文件,将publicPath修改为要访问的域名后面跟的路径publicPath: '/xsdd/',

nginx配置:

1、nginx配置及应用存放结构

 2、nginx配置文件

总结:

大家只需要修改前端vue.config.js的publicPath路径之后打包,再按照上述nginx的配置路径存放打好的包,启动nginx,就可实现一个端口访问多个子系统了。

 

### 配置Nginx以实现在同一域名和端口上托管多个前端应用 #### 修改站点配置文件 为了在同一域名和端口下使用 Nginx 托管多个前端应用程序,需编辑位于 `/etc/nginx/sites-enabled/` 下的配置文件。对于默认设置而言,则应修改名为 `default` 的文件[^1]。 #### 定义不同路径映射至各前端项目 在该配置文件内,可以通过定义不同的 location 块来指定各个前端项目的根目录以及处理静态资源请求的方式: ```nginx server { listen 80; server_name yourdomain.com; # 第一个前端应用 location /app1/ { alias /path/to/app1/dist/; try_files $uri $uri/ /index.html; } # 第二个前端应用 location /app2/ { alias /path/to/app2/dist/; try_files $uri $uri/ /index.html; } } ``` 上述示例展示了两个前端应用分别挂载到了 `/app1/` 和 `/app2/` 这样的 URL 路径之下,并指定了各自构建后的输出文件夹位置作为服务源。同时利用 `try_files` 指令确保即使访问不存在的具体页面也能正确加载单页应用 (SPA)[^3]。 #### 处理 HTML5 History Mode 中的路由问题 当采用 Vue Router 并启用 history 模式时,在刷新浏览器或直接输入地址栏中的深层链接时可能出现找不到对应资源的情况。此时可以在每个location块中加入如下指令解决此问题: ```nginx location /appX/ { ... try_files $uri $uri/ /appX/index.html; } ``` 其中 X 表示具体的应用编号,这会使得任何未匹配到实际存在的文件或目录的情况下都返回 index.html 文件从而让前端框架接管后续的路由解析工作[^4]。 完成以上更改之后保存并关闭文件,最后执行命令重启 Nginx 即可使新的配置生效。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值