Nginx篇 ：反向代理简单部署vue项目，注意事项及常用命令

已于 2023-01-10 09:05:35 修改
阅读量3.3k 收藏 6
点赞数 1
文章标签： nginx 运维 服务器 前端 vue
于 2023-01-10 00:29:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73008860/article/details/128622940
版权
本文介绍了如何使用Nginx进行反向代理部署Vue项目，包括基础配置流程，如设置worker_processes和worker_connections，以及配置server监听端口和server_name。特别强调了location配置的注意事项，如Vue项目的baseurl和proxy_pass的设置。同时，文章总结了配置过程中可能遇到的bug，如语法错误、403 Forbidden等问题，并给出了重启和管理Nginx的常用命令。
摘要由CSDN通过智能技术生成

一、基础流程

1.下载nginx

2.在conf文件夹下nginx.conf中配置

 第一项 配置 worker_processes  1;

第二项 配置 events {worker_connections  1024;}

 第三项 配置http

 第四项 在http中配置server

(本人是配置了两个，一个vue项目（上），一个代理了某网站（下）)

 listen是监听的端口号，(默认80)

sever_name 是服务器的

最低0.47元/天 解锁文章
舒月亮
关注
nginx代理vue
weixin_38879321的博客
03-21 5325
一、nginx代理vue的意义 vue打包后,因为开发环境设置代理 proxy 的原因, 使得访问打包页面 dist/index.html 请求数据出现跨域。 nginx代理vue的意义在于把开发环境中的代理 proxy: {'/api': ... 的/api, 换成生产环境中的地址。 二、下载nginx nginx官网下载并解压，推荐使用稳定版本（nginx/Windows-1.18.0） 三、vue打包 npm run build // 打包文件 (默认)生成文件夹 dist 四、放入ngi
nginx部署前端vue项目
最新发布
丁爸的博客
09-01 1222
Nginx是一个功能强大、性能高效的Web服务器，非常适合用于部署前端Vue项目。然而，对于初学者来说，可能需要一定的时间来熟悉其配置和高级功能。
idea 部署git总结_specify commit message(1)
2401_84433924的博客
04-28 986
github密匙快捷获取方法idea将本地项目上传到远程仓库GitHub报错-》error: src refspec master does not match any.
最详细版-linux安装nginx并代理vue项目（图文教程）
学习记录
08-20 1090
1，Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。2，Nginx支持热部署，启动简单，可以做到7*24不间断运行。几个月都不需要重新启动。3，Nginx 处理高并发能力是十分强大的，能经受高负载的考验4，Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。
Vue-nginx反向代理
qq_40007317的博客
07-31 5836
1、安装nginx 见链接：https://blog.csdn.net/weixin_43638968/article/details/112711272 2、常用nginx命令 start nginx // 开启nginx服务 nginx -s stop // 关闭nginx服务，快速停止nginx，可能并不保存相关信息 nginx -s quit // 关闭nginx服务，完整有序的停止nginx，并保存相关信息 nginx-s reload ...
nginx反向代理vue项目
qq_43548590的博客
09-22 1768
项目描述：前端vue项目、后端Java项目、首页WordPress项目客户要求：使用宝塔进行部署需求描述：客户只有一个SSL单域名DV证书要求首页部署wordpress项目作为官网，/system为vue项目，/api为java后端项目。
vue的nginx反向代理
weixin_49551572的博客
08-07 400
【代码】vue的nginx反向代理。
单机下Vue项目通过Nginx配置反向代理
2401_84093203的博客
04-16 752
给大家分享一些关于HTML的面试题，有需要的朋友可以戳这里获取，先到先得哦。自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**[外链图片转存中…(img-Ld16RIRV-1713203103867)][外链图片转存中…(img-T8alK3Ed-1713203103867)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-tbTbKpds-1713203103868)]
nginx 反向代理(完成图片回显示效果)
liymaVR的博客
10-18 2299
1. Nginx 1.1 Nginx服务器介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler.ru站点（俄文：Рамблер）开发的，第一个公开版本0.1.0发布于2004年10月4日。 其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、简单的配置文件和低系统资源的消耗而闻名。2011年6月1日，nginx 1.0.4发布。 Nginx是一款轻量级
vue-router+nginx 非根路径配置方法
08-27
五、重要注意事项 在使用 alias 指令时，不能使用 root 指令，因为 alias 指令会覆盖 root 指令的配置。 vue-router+nginx 非根路径配置方法可以满足多项目在同一个域名下的需求，同时提供了灵活的路由配置方式。
项目部署文档nginx
07-15
1. **Nginx反向代理配置** - 在Nginx配置文件中设置反向代理规则，将客户端请求转发到后端应用服务上。配置示例如下： ```nginx server { listen 80; server_name example.com; location / { proxy_pass ...
nginx的安装、配置、使用、实战（反向代理，部署vue项目）
ShockChen7的博客
12-28 5808
接下来使用nginx简单配置一个反向代理的实例 实现效果：使用 nginx 反向代理，根据访问的路径跳转到不同端口的服务中 nginx 监听端口为 9001，在本地windows机中访问虚拟机的nginx， 我的虚拟机的ip为192.168.186.43，
2024最全前端面试系列（数据结构篇）（大厂必考算法），学习网页前端开发
2401_84094620的博客
04-03 432
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。
vue项目nginx反向代理配置
cmmboy1990的博客
11-26 6841
1.nginx配置文件设置 #开始配置我们的反向代理 location /prod-api{ rewrite ^/prod-api/(.*)$ /$1 break; include uwsgi_params; proxy_set_header Host $host; proxy_set_header x-forwarded-for $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_pa
vue + nginx 反向代理配置
tonysh_zds的博客
12-23 1900
场景： 门户 地址单点登录跳转到项目地址 门户地址：http://192.168.1.70 门户地址加图标链接： http://192.168.1.70/test 项目地址：http://192.168.1.65/ 门户服务器nginx增加反向代理 test指向 项目地址 server { listen 80 ; server_name localhost; #charset koi8-r; #access_log logs
nginx反向代理，vue2反向代理，vue3反向代理
weixin_50736511的博客
04-06 2608
nginx反向代理 思路就是把两个端口号不一样的url都代理到8080端口，也就是当我们访问一个页面时我们访问的就是8080但是nginx可以帮我们代理到原来html页面的真正端口（前端对于协议和域名产生的跨域是无法解决的，只能解决端口不一样产生的跨域），当客户端要给服务单发送请求时，就可以往8080端口发送请求，这时nginx就会把请求发送到3000端口，就不会产生跨域了 具体配置 vue2反向代理 1.找到config/index.js文件 2.找到dev下面的 proxyTable:{ } 写
Nginx反向代理Vue项目（代理项目地址和解决跨域）
tieniuya的博客
06-10 1566
正向代理 正向代理需要客户端特殊设置，才能访问到某个网站，例如google。 反向代理 反向代理是通过服务端设置，代理服务器用的，用户无感知。 开发vue项目时通过nginx反向代理访问文件地址和接口。 vue 服务端口 9527 /api/ 请求地址（跨域）http://test.com:8882/ 4399 nginx服务端口号（启动服务之后通过它来访问项目） 通过 http://localhost:4399 访问项目 vue项目中请求地址若为 /getUserInfo 写为 /api/get.
Nginx 反向代理 Vue项目
weixin_44101779的博客
07-01 400
1、现在本地安装 Nginx 2、配置Nginx nginx.conf listen 就是Vue项目访问的地址 root 就是Vue项目打包的路径 3、配置完成时候启动Nginx 就可以访问了 localhost:8081
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值