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

最新推荐文章于 2024-06-21 09:57:40 发布
最新推荐文章于 2024-06-21 09:57:40 发布
阅读量1k 收藏 4
点赞数
分类专栏： vue 前端 nginx 文章标签： nginx vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/outman1023/article/details/117823009
版权
vue 同时被 3 个专栏收录
3 篇文章 0 订阅
订阅专栏
前端
1 篇文章 0 订阅
订阅专栏
nginx
1 篇文章 0 订阅
订阅专栏

由于公司服务器前两天被攻击，阿里云服务器直接把公司服务器给关停了，刚好上面没有什么特别重要的数据，就直接格式化了，之前部署的好几个演示版本项目，是监听多个端口来部署的，本次上级只让开一个端口部署，所以研究了半天，记录下成果。

  • 环境
    vue2.x
    vue-cli 4.4.6
    vue-router 3.1.3

  • 配置vue.config.js文件
    配置publicPath
    image.png
    对应后面nginx路径，这里添加的目的是其他静态资源文件统一前缀路径

  • 修改路由配置
    image.png
    注意这个 和上面的一致，为nginx location路径， 也就是请求路径

    上面两项修改好之后，在本地npm run serve把项目跑起来试试，如果不报错，则可进行打包

  • 上传文件到服务器
    我是使用WinSCP上传文件到服务器的 /opt/smartplatforms 目录下
    记住这个文件夹路径，后面nginx的代理路径会指向这里

  • nginx文件配置

     此处就对不对nginx的安装做说明了，请自行百度

修改服务器上的nginx.conf文件，
image.png
修改完成后执行nginx -t检查是否有语法错误，没有的话执行 nginx -s reload重启nginx服务
http://localhost:8081/csgl/
http://localhost:8081/xtld/
…
就可以分别指向不同的项目了

OUT__MAN
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nginx部署一个vue项目
上海市市花的博客
08-09 1万+
第一步:将项目打包 demo地址:https://github.com/RenlyWen/vue-init.git 终端输入命令: cnpm install && npm run build 之后会生成一个dist文件夹 第二步:配置Nginx 修改server-location路径 worker_processes 1; # 以上是全局模块 # worker_processes的值越大,Nginx并发能力越强 events { worker_con...
nginx部署多个vue项目的方法示例
11-19
上一篇已经介绍了然后配置web项目；今天由于公司需求，需要在同一域名端口下，部署两个项目；今天花了一上午终于弄好了，选择赶紧做一个笔记。 如何连接阿里云服务器就不在这里说了，请看我以前的文章。 首先需要的效果 http://47.97.244.83/login http://47.97.244.83/student/login 文件目录 两个项目并列在同一文件夹内。 准备好两个vue的项目 http://47.97.244.83/login：这个不用修改配置直接build就可以。关键是二级域名的vue项目，需要进行一下修改。 首先在config文件夹内的index.js内修改(注意是b
Nginx同一端口部署多个vue项目
jacob20130的博客
06-20 3979
Nginx同一端口部署多个vue项目
一个端口配置两个vue和后端服务，nginx以及前后端服务怎么配？
最新发布
Counter-Strike大牛
06-21 311
第二个项目：http://domain:80/second。第一个项目：http://domain:80/vue第二个项目配置。
Nginx同一端口部署多个前后端分离的vue项目
u010797364的博客
03-09 6293
nginx 一个端口部署多个vue项目
『Nginx』Nginx实现同端口代理多项目 及 同项目多端口配置
老陈聊架构
04-11 7740
📣读完这篇文章里你能收获到，Nginx实现同端口代理多项目，Nginx实现同项目多端口配置
nginx
07-04 202
use epoll; worker_connections 51200; multi_accept on; } http { include mime.types; default_type ap...
Vue-cli项目部署到Nginx服务器的方法
10-16
- 如果你需要在同一台 Nginx 服务器上部署多个 Vue CLI 项目，可以通过修改每个项目的 `vue.config.js` 文件中的 `publicPath`，设置不同的前缀，如 `/vue1/` 和 `/vue2/`。 - 分别将每个项目的构建文件复制到对应...
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
Vue项目部署到阿里云ECS涉及的关键步骤...总结来说，Vue项目部署到阿里云ECS，涉及到前端构建、Nginx反向代理、PM2进程管理、跨域请求处理等多个环节，每个环节都需要细心配置和检查，以确保项目能正常运行并提供服务。
详解vue通过NGINX部署在子目录或者二级目录实践
10-18
创建一个新的`server`块来监听特定端口，例如`8001`，并将Vue应用的静态文件目录设置为`root`： ```nginx server { listen 8001; location / { try_files $uri $uri/ /index.html; root /home/...
nginx同一端口部署不同vue项目
Gpointy的博客
05-23 439
nginx同一端口部署不同vue项目
Nginx同一个端口部署多个vue项目
resuper0的博客
08-03 5303
Nginx同一个端口部署多个vue项目，亲测有效
nginx同一端口部署多个vue项目
qq_44178552的博客
11-30 3716
nginx同一端口部署过个vue项目背景nginx配置文件功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 背景 因该应用嵌入在企业微信中，且企业微信中内置的网页应用配置主页需要二级域名所以导致测试新增功能时还须使用原有域名，这就导
nginx采用80端口发布多个vue项目遇到得那些坑
xgwdy06的专栏
12-05 1836
最近公司申请了个域名，所以之前开发得几个项目要发布，所以在研究如何将多个项目都通过80端口发布出去。 项目包含.net和vue，这里先来说说vue项目 资源和webapi服务在不同得服务器上，之前发布采用的自己随意编的端口，反正不是80端口。对资源和接口的访问采用nginx反向代理，发现发布到不同的服务器上非常方便，不用来回的修改项目中的ip地址。在这里粘上nginx的conf配置，给大家看下...
nginx一个端口部署多个vue项目
qq_38255367的博客
12-25 1638
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应用
xuxiake的博客世界
07-20 2357
使用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 - 同一域名配置多个 Vue 项目（支持Webpack、Uniapp）
牧码的博客
08-20 2265
一、Vue + Webpack 项目配置 1、目录结构图 这里有三个项目，我们接下来分别看下三个项目是如何配置。 2、Nginx Conf 配置 server { listen xxx; # 端口 server_name xxx.xxx.xxx.xxx; # 地址 root /usr/web; location / { root /usr/web/index; in...
nginx 一个端口 部署 多个vue 项目
07-28
回答: 在nginx中，可以通过配置来实现一个端口部署多个vue项目。首先，在vue项目的vue.config.js文件中，需要配置publicPath参数，以及路由中的base参数，用来指定项目的访问路径。\[1\]接下来，在nginx的配置文件nginx.conf中，需要添加对应的location路径，用来匹配请求路径，并将请求转发到对应的项目文件夹下。\[2\]在上传文件到服务器后，需要修改nginx.conf文件，将location路径指向对应的项目文件夹，并重启nginx服务。这样，就可以通过同一个端口访问不同的vue项目了。\[2\] #### 引用[.reference_title] - *1* [Nginx同一端口部署多个vue项目](https://blog.csdn.net/jacob20130/article/details/125368431)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [nginx一个端口部署多个vue项目](https://blog.csdn.net/qq_38255367/article/details/111661353)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Nginx一个端口部署多个vue项目](https://blog.csdn.net/outman1023/article/details/117823009)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值