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

最新推荐文章于 2024-07-04 10:29:00 发布
最新推荐文章于 2024-07-04 10:29:00 发布
阅读量3.3k 收藏 5
点赞数
分类专栏： vue xshell 文章标签： nginx vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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配置由后端完成。
摘要由CSDN通过智能技术生成

场景

上个月遇到了我们的后端同事需要将多个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元/天 解锁文章
悦悦猪
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
【nginx配置同一域名下部署多个项目，前端配置问题】
weixin_44592971的博客
01-10 1741
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项目
m0_53353187的博客
09-26 456
主要参考博客 Nginx一个端口部署多个vue项目_out有点man的博客-CSDN博客 修改nginx配置文件: cd /tools/nginx-1.14.2/conf vi nginx.conf 一个server{}配置,端口为9080，配置如下： nginx配置完成后: 用命令：ps –ef|grep nginx Kill -9 xxx 启动：/...
使用 nginx 同域名下部署多个 vue 项目，并使用反向代理
weixin_33726313的博客
02-27 1738
花了 3 天时间，趁着我还没有忘记，先记录下来 效果 目前有 2 个项目（project1, project2），还有一个 nginx 自带的 index.html，我添加了对应的链接代码（稍后粘贴出来），为了统一管理子项目的路由。 我期望实现下面的效果（假设 ip: localhost，port: 8080）： http://local...
nginx部署多个项目；vue打包项目部署设置子路径访问；一个根域名（端口）配置多个子项目
最新发布
北海_南风
07-04 734
本文解决： - vue打包项目部署设置子路径访问； - nginx部署多个子项目； - 一个ip/域名 端口 配置多个子项目； - 配置后，项目能访问，但是刷新页面就丢失的问题
Nginx一个端口部署多个vue项目
out有点man的博客
06-11 1089
由于公司服务器前两天被攻击，阿里云服务器直接把公司服务器给关停了，刚好上面没有什么特别重要的数据，就直接格式化了，之前部署的好几个演示版本项目，是监听多个端口来部署的，本次上级只让开一个端口部署，所以研究了半天，记录下成果。 环境 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 1750
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项目
aijf2525的博客
12-28 620
想要在同一个域名下部署多个前端项目，同一个域名下登录了另一个不需要登录，通过不同的url来区分项目。以wms举例:wms项目的访问地址、路由统一加上wms前缀（其他项目类似）输入localhost:8181/mes/,则展示mes项目。输入localhost:8181/wms/,则展示wms项目。nginx里的地址要和这里的位置对应。
nginx部署多个vue项目的方法示例
10-14
在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。 首先，我们的目标是在同一个域名下部署两个Vue...
nginx同一域名部署多个vue项目_MQ
weixin_42588676的博客
01-16 2945
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项目
resuper0的博客
08-03 5458
Nginx同一个端口部署多个vue项目，亲测有效
nginx同一端口下部署多个vue应用
xuxiake的博客世界
07-20 2368
使用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...
vite nginx 实现同端口部署多个vue项目
weixin_45610943的博客
01-09 750
//
nginx同一端口代理多个vue项目（每个vue项目占据一个端口--jar包启动）
qq_34169240的博客
03-19 1881
1. 需求： 现在有两个vue项目（hash模式，即默认模式：路由中配 mode:'hash'或者不配） ，都用端口8084访问： http://localhost:8081/#/ 和 http://localhost:8082/#/ http://localhost:8081/#/aView 访问的是8081中的页面 http://localhos...
vue2-nginx同时部署多个vue项目
qq_43526329的博客
08-24 456
转载：nginx同时部署多个vue项目
同一域名端口下，通过nginx部署多个vue项目
诚的博客
08-26 867
情景介绍 　　服务器上80端口已部署一套vue项目，现在乃至未来还可能要部署n个前端项目，而已部署的项目的nginx的配置不能修改 项目配置 　　假设需要部署的第二个vue项目是放在服务器的 “project” 目录下 　　打包环境： 　　　　　1、os：Windows10 　　　　　2、node: v12.19.0 　　　　　3、vue-cli3 　　　　　4、vue:2.3.10 第一步 将vue.config.js里的publicPath 设置为‘'/proje...
nginx 同一域名下部署多个vue项目
Stavin Li的博客
12-05 985
以 espace 和 mobile 项目为例 server { listen 8001; location / { root /opt/espace; #示例 /root/lc/dist #注意：用‘/’ index index.html index.htm; try_files $uri $uri/ /index.html; #解决子...
nginx采用80端口发布多个vue项目遇到得那些坑
xgwdy06的专栏
12-05 1843
最近公司申请了个域名，所以之前开发得几个项目要发布，所以在研究如何将多个项目都通过80端口发布出去。 项目包含.net和vue，这里先来说说vue项目 资源和webapi服务在不同得服务器上，之前发布采用的自己随意编的端口，反正不是80端口。对资源和接口的访问采用nginx反向代理，发现发布到不同的服务器上非常方便，不用来回的修改项目中的ip地址。在这里粘上nginx的conf配置，给大家看下...
一个域名部署多个vue项目的方法
csdn姚宏波
04-28 3689
前言 在生产环境中，一般一个域名对应一个前端项目，但如果域名紧张，不想浪费二级域名，或者自己的测试项目，完全可以一个域名对应多个前端项目、 以 vue 为例，要实现这一点，需要 vue-router 中的 base 选项助力 2. base 简介 base 选项设置应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/" base 选项的默认值为 “/”，这个代表什么意思呢？ 我们知道，无论是开发模式下，还是生产模式下，我们都需要启动一个服务来运行我们的前端项目
nginx 一个端口 部署 多个vue 项目
07-28
回答: 在nginx中，可以通过配置来实现一个端口部署多个vue项目。首先，在vue项目的vue.config.js文件中，需要配置publicPath参数，以及路由中的base参数，用来指定项目的访问路径。\[1\]接下来，在nginx的配置文件...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值