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

KyLenMou

已于 2024-01-24 20:44:09 修改

阅读量614

点赞数 11

分类专栏：问题解决文章标签： vue.js 前端服务器 nginx

于 2024-01-24 16:22:29 首次发布

本文链接：https://blog.youkuaiyun.com/KyLen_Mou/article/details/135825195

版权

问题解决专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何编辑Nginx配置文件，将Vue项目打包后部署到指定位置，并指出文件夹结构、使用IP地址加端口访问以及考虑服务器防火墙安全的要点。

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

编辑nginx.conf文件，如下图

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

KyLenMou

关注关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Nginx一个端口代理多个vue项目，通过不同路由转到不同系统，反向代理Apache进行文件处理

风不知从何处起的小屋

05-31

972

这里将多个vue项目通过一个nginx端口进行代理，由不同的路由来确定访问哪些项目，apache同理。

【Nginx 】Nginx 部署前端 vue 项目

m0_74825746的博客

01-17

1512

在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。

参与评论您还未登录，请先登录后发表或查看评论

服务器上的nginx 部署多个前端vue项目（不同端口）

小懒魔王的博客

01-27

4837

部署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项目

u010797364的博客

03-09

6958

nginx 一个端口部署多个vue项目

nginx配置解决跨域

jefferylong的博客

09-09

680

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

4061

nginx部署多个vue项目，不同端口号下是否连接上云服务器进入nginx文件下进入 nginx.conf 文件并配置第一个项目第一个项目配置第二个项目配置将创建的后缀 `.conf` 引入主后置 `.conf` 中欢迎在评论区交流！！！！下面笔者会写出一份详细的操作及配置流程，供大家参考学习！这里，是有一台“云服务器”（笔者的是华为云服务器），一款“Xshell”借助它来操作服务器，一款“Xftp”借助它来给服务器相对的位置上传项目文档，不知道的，可以通过点击进去查看，里面有各自详细的使用教程。v

Ruoyi-Vue前端部署-nginx部署多个vue前端项目

qq_34746960的博客

04-24

2058

nginx使用同一端口部署多项目

nginx 部署前端vue项目

最新发布

m0_74825526的博客

03-07

525

Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。优点支持海量高并发：采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接，实际生产环境中可以支撑2-4万并发连接数。内存消耗少可商业化配置文件简单除了这些优点还有很多，比如反向代理功能，灰度发布，负载均衡功能等。

Nginx部署多个前端项目如何实现配置隔离？Nginx多项目部署

BaynotBar的博客

05-29

943

Nginx是一个功能十分强大的HTTP web服务器，其高性能、支持反向代理和负载均衡的特性使得其在Web项目中应用十分广泛。我们将前端项目打包部署在Nginx的Html（www）目录下，并需要在conf目录下的nginx.conf文件中写入相关配置（server、upstream等），此时如果部署了多个前端项目，一个文件中配置多个不同的server耦合度太高且维护较为繁琐，因此实现多项目环境下的配置隔离尤其重要。本文介绍了Nginx部署多个前端项目如何实现配置隔离。

nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx

m0_61068496的博客

04-21

3369

以我的为例：server# http版本#̲ 继承地址，这里的http_upgrade为上面的proxy_pass# 传递的ip。

nginx配置多个vue项目访问

shenxiaomo1688的博客

11-15

603

防止页面刷新404。# 防止页面刷新404。# 这个是第二个vue项目页面访问地址 http://ip:8089/two。# 这个是第一个vue项目页面访问地址 http://ip:8088。# 这个是第二个vue项目页面访问地址 http://ip/sub。# 这个是第一个vue项目页面访问地址 http://ip。

使用nginx实现一个端口和ip访问多个vue前端

星星的博客

07-22

1981

前言：由于安全组要求，前端页面只开放一个端口，但是项目有多个前端，此前一直使用的是一个前端使用单独一个端口进行访问，现在需要调整。重新打包构建vue前端代码，修改nginx配置，并重启nginx，防火墙允许nginx配置的端口。需要实现：这里以80端口为例，两个前端分别是：project1，project2。例如：访问项目1：192.168.1.10:80/project1。需要的配置：1、nginx配置；2、vue前端代码修改。两个项目的vue代码均要修改。2、vue前端代码修改。

【Nginx】部署多个项目；vue打包项目部署设置子路径访问；一个根域名（端口）配置多个子项目

北海_南风

07-04

1753

本文解决： - vue打包项目部署设置子路径访问； - nginx部署多个子项目； - 一个ip/域名端口配置多个子项目； - 配置后，项目能访问，但是刷新页面就丢失的问题

使用nginx部署多个vue项目,亲测有效(使用域名https方式访问)

qq_42643690的博客

02-01

2244

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

757

本文介绍使用nginx服务器在下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。

nginx 部署多个项目的两种方式

gu2022_3_5_21_23的博客

01-09

7722

nginx 部署多个项目

前端vue部署nginx多端口文件配置

qq_1336674576的博客

12-28

743

nginx文件配置

如何使用 Nginx 部署前端 Vue 项目

Hellc007的博客

09-05

837

通过 Nginx 部署 Vue 项目需要先构建项目并将静态文件复制到服务器上，再配置 Nginx 进行前端路由和文件服务。掌握这些步骤后，便可以轻松部署任意 Vue 项目。

nginx部署vue项目及nginx配置

lhyxm的博客

11-29

5728

nginx部署vue项目,vue.conf.js配置文件默认配置publicPath为根路径。，只需要打包好dist包，部署nginx即可，根据前端配置好的axios请求前缀。），需要在vue.conf.js配置文件配置publicPath，例如。时，需要配置配置nginx的location选项，将location的。不然会出现报错，找不到服务器静态资源。的方式请求nginx获取服务器的静态资源，(，配置拦截，跳转代理的后台接口即可。),而使用alias配置时，会使用。)之后，root配置会使用。

新版nginx-1.22.0实现vue前端高效静态部署

2. 配置Nginx：编辑Nginx的配置文件（通常是nginx.conf），设置server块以监听适当的端口，并配置location块来处理前端路由和静态资源。 3. SSL证书安装：配置SSL/TLS证书以启用HTTPS。 4. 测试配置：使用nginx -t...