nginx部署多个vue项目，不同端口号下

最新推荐文章于 2024-04-24 11:48:39 发布
最新推荐文章于 2024-04-24 11:48:39 发布
阅读量3.4k 收藏 35
点赞数 3
分类专栏： 有关服务器部署 Nginx 文章标签： nginx部署vue项目 多个vue项目不同端口
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45527702/article/details/119002526
版权

nginx部署多个vue项目，不同端口号下

下面笔者会写出一份详细的操作及配置流程，供大家参考学习！
这里，是有一台“云服务器”（笔者的是华为云服务器），一款“Xshell”借助它来操作服务器，一款“Xftp”借助它来给服务器相对的位置上传项目文档，不知道的，可以通过点击进去查看，里面有各自详细的使用教程。vue项目的打包 npm run build，下面的所有操作都建立于xshell和服务器连接成功的基础上，并且nginx已经安装成功,没有安装的，请自行查找资料，笔者忘记了整理了，但是整理了windows服务器的安装教程，点击这里查看。

是否连接上云服务器

在这里插入图片描述

进入nginx文件下

在这里插入图片描述

进入 nginx.conf 文件并配置第一个项目

先说明下，笔者这里采用的不是在同一个 .conf 文件配置，为什么呢？因为如果配置文件出现问题，则所有项目都会出现问题，笔者采用的是多个 .conf 文件（一个项目一个 .conf 文件，文件命名最好用项目名称英文来创建，目的便于后期的区分），这样就是一个主进程，其它的都属于它的子进程，子进程出现问题，之间互不影响。

第一个项目配置

nginx.conf
在这里插入图片描述

第二个项目配置

cqdz-view-nginx.conf ，到这里，有的人会问，如何创建第二个后缀为 .conf 文件， 还是通过编辑默认 vim cqdz-view-nginx.conf，进入该文件，然后进入“插入模式（i）”，随便写点啥，保存退出:wq，这样一个新的后缀为 .conf 文件就创好了。
在这里插入图片描述

将创建的后缀 .conf 引入主后置 .conf 中

第二个项目配置完成后，返回第一个项目配置文件（主文件）
在这里插入图片描述

到这里，基本的配置已经完成，后面再多的项目都是如此一样。笔者亲调有效！！

突然回想起这块遇过的一个问题：静态资源加载 404 not found
项目访问到了，就是界面加载不出来
在这里插入图片描述
笔者改了这里，再也没有出现错误了。

欢迎在评论区交流！！！！

湘水狱
关注
  • 3
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
nginx一个端口多个vue项目
m0_53353187的博客
09-26 428
主要参考博客 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多页面项目
link750的博客
05-26 1656
众所周知，vue主要是用于开发单页应用的，在网上，也可以通过修改配置文件，实现多页面应用的开发，通过配置方式的开发多页面会有较多的缺点，在网上有许多论述，在此不再多言。此篇文章主要讲的是vue多页面的项目在nginx上部署，实现前后端分离，后台通过webapi和ajax的方式获取数据的方式。 1、 首先需要做的是在服务器上安装nginx服务器，个人使用的是Ubuntu20.4版本，这个网上的教程较多，不做过多介绍。 2、修改nginx的配置文件，在安装完成之后，输入nginx -v查看nginx服务的版本，
nginx配置解决跨域
jefferylong的博客
09-09 601
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项目
前端很杂，故名前端杂货铺 —— coderkey
08-22 8043
本地开发好了多个前端微信网页项目，想部署上线，但是微信那边必须得在默认端口下访问前端项目，于是就nginx配置同一域名同一端口下部署多个vue项目。根据根路径不同分别代理访问不同项目，刚好解决这个问题。默认端口就只有一个，多个项目实现不了。文件夹，然后放在对应的位置上 ，配置。以上全部搞完之后就可以访问了；
Ruoyi-Vue前端部署-nginx部署多个vue前端项目
最新发布
qq_34746960的博客
04-24 899
nginx使用同一端口部署多项目
Nginx同一端口部署多个vue项目
jacob20130的博客
06-20 3970
Nginx同一端口部署多个vue项目
服务器上的nginx 部署多个前端vue项目（不同端口）
小懒魔王的博客
01-27 4271
部署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项目
qq_49206255的博客
03-18 1041
Vue项目打包后就变成了静态界面，在代码中动态配置的代理是不生效的，要注意默认配置。除了vue.config.js文件配置需要注意外，还有两个文件需要特别对待，分别是src-main.js、src-router-index.js文件，分别如图所示。跨域配置是根据配置进行拼接地址访问的，要注意请求后面的“/”，和跳转地址后的“/”，到现在重启nginx就可以访问了。根据不同项目的vue部署需求，可以在同一地址下的同一端口进行配置，配置完毕就可以访问vue前端项目了。在同一ip同一端口下部署一个vue项目。
nginx部署vue项目（包括一个nginx部署多个vue项目）
guoyp2126的博客
09-17 9359
在nginx部署vue项目，含同一端口号下，配置多个vue项目
nginx下部署vue项目的方法步骤
01-09
今天要用到服务器nginx，还需要把自己的vue的项目部署到服务器上去所以就写一下记录下来。 首先要去nginx官网下下载nginx： 下载地址：https://nginx.org/en/download.html 下载下来会是一个解压包，解压到你想...
nginx部署vue项目
01-20
在本文中，我们将深入探讨如何使用Nginx部署Vue.js项目。Vue.js 是一个流行的前端JavaScript框架，而Nginx则是一个高效的Web服务器，常用于处理静态资源和反向代理。我们将按照步骤来讲解如何打包Vue项目并将其部署...
nginx部署访问vue-cli搭建的项目的方法
08-28
5. 最后，我们可以直接输入地址栏中的端口号，以便访问 Vue-cli 搭建的项目。 使用 Nginx 部署访问 Vue-cli 搭建的项目需要配置 Nginx 服务器，包括创建后台服务器对象、创建访问端口和反向代理规则、配置反向代理...
IIS部署.NET+Vue项目.docx
05-25
iis 部署 .net + vue 项目知识点总结 在本文中，我们将对 iis 部署 .net +...iis 部署 .net + vue 项目需要注意的知识点包括基本环境、项目结构、H5 配置、API 配置、IIS 部署、Swagger 配置和 Redis 设置等多个方面。
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
10-14
主要介绍了解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Nginx 配置多个Vue项目
hudabao888666的博客
02-09 3110
Nginx 配置多个Vue项目
nginx配置多个vue项目
BluerCat的博客
06-14 4435
如何在nginx配置多个vue项目？第一种是使用不同的端口，既配置多个server即可。第二种是同一个端口，既在一个server里面配置多个vue项目。多个端口，只需要调整nginx配置，若使用同一个端口，则需要稍微调整一下vue打包配置。
使用Nginx如何部署两个不同的项目
TC0221的博客
05-12 1159
在 windows系统中实现一个 nginx 部署多个（2个)不同的端口号访问不同的项目
nginx 部署两个vue项目遇到的问题
pillowc的博客
09-01 227
第四步：在docker映射的html目录中创建`ruoyi`文件夹，将打包好的项目复制到此，在`nginx.conf`中增加配置信息如下，这里的root末尾就不需要加上项目名`ruoyi`，因为第三步已经配置了全局前缀，这里所有的访问都是已经加上了`/ruoyi/`前缀， try_files这里最后的Index.html需要加上项目名/ruoyi/，否则页面刷新后就找不到主页或者显示404。这两天在学习使用docker部署的时候，第一次接触到nginx，遇到很多问题，今天折腾好一会才解决，记录一下。
Nginx同一个端口部署多个vue项目
resuper0的博客
08-03 5261
Nginx同一个端口部署多个vue项目，亲测有效
nginx docker部署多个vue项目
09-02
您可以使用 Docker 和 Nginx 部署多个 Vue 项目。下面是一种可能的方法： 1. 创建 Docker 镜像：为每个 Vue 项目创建一个 Docker 镜像。您可以在每个项目的根目录中创建 Dockerfile 文件，并指定项目的构建和运行步骤。以下是一个示例 Dockerfile： ```Dockerfile # 定义基础镜像 FROM node:14 as build # 设置工作目录 WORKDIR /app # 拷贝 package.json 和 package-lock.json 文件 COPY package*.json ./ # 安装依赖 RUN npm install # 拷贝项目文件 COPY . . # 构建项目 RUN npm run build # 定义 Nginx 镜像 FROM nginx:1.19 # 删除默认配置文件 RUN rm /etc/nginx/conf.d/default.conf # 将自定义 Nginx 配置文件复制到容器中 COPY nginx.conf /etc/nginx/conf.d/ # 将构建好的 Vue 项目复制到 Nginx 的静态文件目录中 COPY --from=build /app/dist /usr/share/nginx/html # 暴露 Nginx 默认端口 EXPOSE 80 # 启动 Nginx 服务 CMD ["nginx", "-g", "daemon off;"] ``` 请确保在每个项目的根目录中创建相应的 nginx.conf 配置文件，以正确配置 Nginx。以下是一个示例配置文件： ```nginx server { listen 80; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 2. 构建 Docker 镜像：对于每个项目，使用以下命令在项目根目录中构建 Docker 镜像（假设 Dockerfile 和 nginx.conf 配置文件已准备好）： ```bash docker build -t project1 . ``` 3. 运行 Docker 容器：使用以下命令在不同的端口上运行每个项目的 Docker 容器（示例中使用端口号 8081 和 8082）： ```bash docker run -d -p 8081:80 project1 docker run -d -p 8082:80 project2 ``` 现在，您应该可以通过访问相应的端口号来访问每个项目。例如，通过访问 `http://localhost:8081` 来访问第一个项目，通过访问 `http://localhost:8082` 来访问第二个项目。 注意：如果您的项目需要处理后端 API 请求，您可能需要在 Nginx 配置文件中添加适当的代理规则。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值