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

最新推荐文章于 2025-06-17 08:50:24 发布
最新推荐文章于 2025-06-17 08:50:24 发布
阅读量3.5k 收藏 5
点赞数
CC 4.0 BY-SA版权
分类专栏： vue xshell 文章标签： nginx vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhangxiaodui/article/details/123247769
本文记录了如何在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({
最低0.47元/天 解锁文章

200万优质内容无限畅学
Nginx同一个端口部署多个vue项目
resuper0的博客
08-03 6157
Nginx同一个端口部署多个vue项目，亲测有效
【nginx配置同一域名下部署多个项目，前端配置问题】
weixin_44592971的博客
01-10 1916
nginx配置 location /test/ { proxy_pass http://gatewayServer/; client_max_body_size 1000m; proxy_set_header Host $proxy_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-Fo
使用 nginx 同域名下部署多个 vue 项目，并使用反向代理
weixin_33726313的博客
02-27 1811
花了 3 天时间，趁着我还没有忘记，先记录下来 效果 目前有 2 个项目（project1, project2），还有一个 nginx 自带的 index.html，我添加了对应的链接代码（稍后粘贴出来），为了统一管理子项目的路由。 我期望实现下面的效果（假设 ip: localhost，port: 8080）： http://local...
以RuoYi-Vue为例实现nginx一个端口下部署多个前端vue项目
最新发布
程序员伍一的笔记
06-17 266
3. 修改配置ruoyi-ui\src\router\index.js​​​​​​​。5. 修改配置ruoyi-ui\src\utils\request.js。2. 修改配置ruoyi-ui\vue.config.js。http://ip:端口/syyc-plus。6. nginx的配置如下​​​​​​​。上面这两个配置文件中新增如下配置项。1. 新增前端的访问路径配置项。我的公众号“程序员伍一的笔记”[👆️关注我🤝解锁更多技能🫰]
Nginx同一端口下部署多个vue项目
qq_49206255的博客
03-18 1573
Vue项目打包后就变成了静态界面，在代码中动态配置的代理是不生效的，要注意默认配置。除了vue.config.js文件配置需要注意外，还有两个文件需要特别对待，分别是src-main.js、src-router-index.js文件，分别如图所示。跨域配置是根据配置进行拼接地址访问的，要注意请求后面的“/”，和跳转地址后的“/”，到现在重启nginx就可以访问了。根据不同项目的vue部署需求，可以在同一地址下的同一端口进行配置，配置完毕就可以访问vue前端项目了。在同一ip同一端口下部署一个vue项目。
nginx配置同一域名同一端口下部署多个vue项目
strggle_bin的博客
04-18 1866
调整完毕后，直接执行build打包命令，可以发现index.html引入js路径增加了/project。在vue.config.js文件中修改publicPath路径为/project/在router文件夹中index.js文件中修改base为 ‘/project/’如果页面中有二级路由的话，配置文件中一定不能用root，要用alias.默认端口就只有一个，有多个项目需要部署到同一端口下。根据根路径不同分别代理访问不同项目。
nginx在同一域名下部署多个vue项目
IICOOM的博客
08-11 817
本文介绍使用nginx服务器在下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。
nginx部署多个vue项目的方法示例
10-14
在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。 首先，我们的目标是在同一个域名下部署两个Vue...
nginx同一域名部署多个vue项目_MQ
weixin_42588676的博客
01-16 3082
nginx同一域名部署多个vue项目_MQ 1、第一个项目正常打包部署，第二个及以上的项目需要设置项目访问路径（请求路径） 第一个正常打包即可 访问时只需要输入域名 ：www.xxx.com; 第二个项目访问路径为：www.xxx.com/bi; 2、项目添加前缀 （1）配置文件添加 （2）路由添加 （3）打包好后index.html页面添加 <meta base=/bi/> <meta base=你的前缀> 3、打包部署 4、nginx配置 server {
nginx一个端口多个vue项目
m0_53353187的博客
09-26 620
主要参考博客 Nginx一个端口部署多个vue项目_out有点man的博客-优快云博客 修改nginx配置文件: cd /tools/nginx-1.14.2/conf vi nginx.conf 一个server{}配置,端口为9080，配置如下： nginx配置完成后: 用命令：ps –ef|grep nginx Kill -9 xxx 启动：/...
nginx同一端口部署多个vue项目
qq_44178552的博客
11-30 4006
nginx同一端口部署过个vue项目背景nginx配置文件功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 背景 因该应用嵌入在企业微信中，且企业微信中内置的网页应用配置主页需要二级域名所以导致测试新增功能时还须使用原有域名，这就导
Nginx一个端口部署多个vue项目
out有点man的博客
06-11 1186
由于公司服务器前两天被攻击，阿里云服务器直接把公司服务器给关停了，刚好上面没有什么特别重要的数据，就直接格式化了，之前部署的好几个演示版本项目，是监听多个端口来部署的，本次上级只让开一个端口部署，所以研究了半天，记录下成果。 环境 vue2.x vue-cli 4.4.6 vue-router 3.1.3 配置vue.config.js文件 配置publicPath 对应后面nginx路径，这里添加的目的是其他静态资源文件统一前缀路径 修改路由配置 注意这个 和上面的一致，为nginx lo
nginx一个端口部署多个vue项目
qq_38255367的博客
12-25 1832
nginx一个端口部署多个vue项目vue.config.js中publicPath参数配置路由中base参数配置index.html中配置metanginx配置,conf目录下nginx.conf文件 vue.config.js中publicPath参数配置 /** * publicPath参数官方说明： * 部署应用包时的基本 URL, 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上例如 https://www.my-app.com/。 * 如果应用被部署在一个子路径上，
nginx 在同端口下，配置多个vue项目
yaoxie1534的博客
02-10 3083
步骤1：前端修改代码 1. 修改router/index.js 增加一项base,名字和文件夹名保持一致，在接下来的nginx配置中有用 import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/Index' Vue.use(Router) export default new Router({ mode: 'history', base: '/stress', r.
Nginx 同一端口下部署多个 Vue3 项目
默存
10-17 2796
前端多项目部署到 Nginx 的同一监听端口下的解决方案，项目由一个主项目和多个子项目组成，主项目和子项目都是单独打包。主子项目之间是使用的腾讯开源的无界（WebComponent 容器 + iframe 沙箱）前端框架，能够完善的解决适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等。
一个域名nginx配置多个vue项目
m0_52647839的博客
04-27 671
需求：多租户条件下，每个用户订制自己的界面，但后台API不变。这里的方案是每个用户配置一个前端项目，使用同一个域名，域名后面跟上用户的名字，不同访问路径匹配不同项目。
nginx同一端口下部署多个vue应用
xuxiake的博客世界
07-20 2412
使用webpack开发的vue 1.编辑 config/index.js 在build对象下添加assetsPublicPath: ‘/应用表示/‘（就是url后面跟的标识，https://blog.csdn.net/qq_31075763/article/details/89554859, 类似qq_31075763标识）。 2.编辑router/index.js 在Router对象定义下添加b...
nginx同一域名同一端口部署多个前端项目
12-27
### 配置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、付费专栏及课程。

余额充值