配置nginx和多个前端vue项目(端口配置)

已于 2024-01-24 20:44:09 修改
阅读量519 收藏 9
点赞数 11
分类专栏： 问题解决 文章标签： vue.js 前端 服务器 nginx
于 2024-01-24 16:22:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kylen_mou/article/details/135825195
版权

编辑nginx.conf文件，如下图

同时将vue项目打包，把打包后的文件夹放到指定位置，上图的文件夹目录结构应为如下所示

html
|-project1
|-|-index.html
|-|-其他文件和文件夹
|-project2
|-|-index.html
|-|-其他文件和文件夹

访问页面时使用IP地址+端口即可(如果部署在服务器上，可能需要关闭对应端口的防火墙，所以使用本方法要考虑安全性)

KyLenMou
关注
  • 11
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
m0_61068496的博客
04-21 2390
以我的为例：server# http版本#̲ 继承地址，这里的http_upgrade为上面的proxy_pass# 传递的ip。
nginx 部署多个vue前端项目
weixin_43120613的博客
02-24 2505
思想：1、先反向代理 ，将多个前端项目的静态资源文件放不同位置，通过反向代理出去，可以做到用户同一个域名端口，不同路径访问不同项目， 2、再正向代理，前端访问不同后端，配置正向代理，转发到相应后端服务。 #######前端反向代理出去 location / { root /usr/share/nginx/html; index index.html index.html; try_files $uri $uri/ /index.html;
前端vue部署nginx多端口文件配置
qq_1336674576的博客
12-28 655
nginx文件配置
服务器上的nginx 部署多个前端vue项目（不同端口）
小懒魔王的博客
01-27 4432
部署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打包项目部署设置子路径访问；一个根域名（端口）配置多个子项目
北海_南风
07-04 728
本文解决： - vue打包项目部署设置子路径访问； - nginx部署多个子项目； - 一个ip/域名 端口 配置多个子项目； - 配置后，项目能访问，但是刷新页面就丢失的问题
Nginx同一端口部署多个前后端分离的vue项目
u010797364的博客
03-09 6417
nginx 一个端口部署多个vue项目
nginx配置解决跨域
jefferylong的博客
09-09 613
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 3594
nginx部署多个vue项目，不同端口号下是否连接上云服务器进入nginx文件下进入 nginx.conf 文件并配置第一个项目第一个项目配置第二个项目配置将创建的后缀 `.conf` 引入主后置 `.conf` 中欢迎在评论区交流！！！！ 下面笔者会写出一份详细的操作及配置流程，供大家参考学习！ 这里，是有一台“云服务器”（笔者的是华为云服务器），一款“Xshell”借助它来操作服务器，一款“Xftp”借助它来给服务器相对的位置上传项目文档，不知道的，可以通过点击进去查看，里面有各自详细的使用教程。v
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
Vue项目部署到阿里云ECS涉及的关键步骤...总结来说，Vue项目部署到阿里云ECS，涉及到前端构建、Nginx反向代理、PM2进程管理、跨域请求处理等多个环节，每个环节都需要细心配置和检查，以确保项目能正常运行并提供服务。
nginx一个端口多个vue项目
m0_53353187的博客
09-26 449
主要参考博客 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实现一个端口和ip访问多个vue前端
星星的博客
07-22 471
前言：由于安全组要求，前端页面只开放一个端口，但是项目有多个前端，此前一直使用的是一个前端使用单独一个端口进行访问，现在需要调整。重新打包构建vue前端代码，修改nginx配置，并重启nginx，防火墙允许nginx配置的端口。需要实现：这里以80端口为例，两个前端分别是：project1，project2。例如：访问项目1：192.168.1.10:80/project1。需要的配置：1、nginx配置；2、vue前端代码修改。两个项目的vue代码均要修改。2、vue前端代码修改。
Nginx一个端口代理多个vue项目，通过不同路由转到不同系统，反向代理Apache进行文件处理
风不知从何处起的小屋
05-31 624
这里将多个vue项目通过一个nginx端口进行代理，由不同的路由来确定访问哪些项目，apache同理。
使用nginx部署多个vue项目,亲测有效(使用域名https方式访问)
qq_42643690的博客
02-01 2041
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项目
最新发布
IICOOM的博客
08-11 310
本文介绍使用nginx服务器在下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。
nginx 部署多个项目 的两种方式
gu2022_3_5_21_23的博客
01-09 6979
nginx 部署多个项目
vue项目默认端口号
m0_55477902的博客
01-18 2160
本地启动vue项目时，明明在vue.config.js中配置的端口号为默认的80，但启动后端口号总是从1024开始，如果被占用则会在占用的端口号上+1，一直没想通，最近才知道原来mac os的默认端口号windows不同。在mac os中，非root用户是无法使用小于1024的常用端口的。如果小于1024端口，会从1024开始。vue项目如果要自定义端口号，有几种方式。
nginx配置多个vue项目
BluerCat的博客
06-14 4574
如何在nginx配置多个vue项目？第一种是使用不同的端口，既配置多个server即可。第二种是同一个端口，既在一个server里面配置多个vue项目。多个端口，只需要调整nginx配置，若使用同一个端口，则需要稍微调整一下vue打包配置。
【Java日常运维】Nginx部署多个vue项目方法以及所遇问题解决方法
qq_45248284的博客
12-12 387
Nginx一个端口去部署多个vue项目方法以及所遇问题解决方法，根据URL路径不同来访问不同系统服务
Zabbix入门指南：配置虚拟主机与Vue vuex实践
同时，提供了ZABBIX监控系统的详细教程，包括从入门到精通的多个章节，涵盖Zabbix的介绍、安装、快速上手和配置等内容。" 在【标题】中提到的“配置虚拟主机-vue使用vuex实现首页导航切换不同路由的方法”是关于Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

KyLenMou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值