nginx同一域名同一端口部署多个vue项目之前端操作

本文记录了如何在nginx上将多个vue项目部署到同一域名同一端口下,前端需修改public/index.html的head标签,src/router/index.js和vue.config.js,设置不同访问路径如xxx.xxx.com:8089/productA、productB、productC,其余nginx配置由后端完成。

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

场景

上个月遇到了我们的后端同事需要将多个vue项目部署到同一域名同一端口下,下面记录一下当时我们两个里面前端的操作有哪些。
例如有一个产品,它分为3个产品模块,有三个vue的项目想部署到同一域名下
访问路径想为如下所示:
xxx.xxx.com:8089/productA
xxx.xxx.com:8089/productB
xxx.xxx.com:8089/productC

方法

前端我进行了3个操作,剩余nginx那里由后端来处理

1.public/index.html文件
head标签里加入如下代码

<meata base="/productA/">

2.src/router/index.js文件

const createRouter = () => 
	new Router({
   
   
### 配置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 即可使新的配置生效。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值