Windows系统下如何使用nginx部署vue2项目

这篇博客详细介绍了在Windows系统下如何使用nginx部署vue2项目,包括下载安装nginx,解决路径和端口问题,打包vue项目并配置nginx反向代理。遇到问题时,可以查看nginx的日志文件进行排查。
摘要由CSDN通过智能技术生成

前言:

今天产品经理过来找我,问我有没有什么办法能够让前端做的项目给他看,他要测试一下看看我们开发的需求有没有对齐。然后我就说:可以,有几种办法:

  1. 直接访问我本地idea启动的服务,但是这样我每次改代码保存页面就会刷新,这样显然不行,不稳定。
  2. 产品经理直接把仓库代码拉下来自己在本地运行代码,额,这虽然解决了上面这个问题,但是问题又来了,产品经理他不懂前端,你又要帮他在他的电脑上准备好前端的开发环境,显然很麻烦。
  3. 前端把项目打包部署到测试环境,这是很好的办法,但是我们没有测试环境的机器,那这咋整🤣🤣🤣

想了许久,感觉产品经理都要怀疑我的能力了,最后灵机一动,咦!好像nginx也有windows版本的,我可以在我电脑上安装一个nginx,然后把项目打包部署到nginx服务器上,那这样产品经理不是就可以访问一个稳定的测试环境了吗。
最后就下载了windows版本的nginx,然后把项目打包部署到nginx服务器上,因为之前nginx接触得少,所以这个过程中也遇到了很多问题,所以就写一篇博客记录一下,希望你看完这篇文章对你有所帮助,少走点弯路,废话就不多说了,下面直接手摸手带你部署vue2项目!!!

第一步:下载安装nginx

1、首先我们要去nginx的官网下载windows版本的nginx

下载地址:

http://nginx.org/en/download.html

浏览器打开下载地址会看到如下图所示界面,第一个是最新版本,第二个是稳定版本,建议下载稳定版本就好了,少遇到一些坑🤣
在这里插入图片描述

2、点击下载链接后会下载得到如下一个nginx的压缩包:

在这里插入图片描述

3、解压nginx压缩包,这里需要注意了哈,nginx的解压路径不能存在中文,否则nginx服务会无法正常启动的哈,不信你试试🤪

在这里插入图片描述

4、我们双击nginx.exe文件启动服务,细心观察的小伙伴会发现有一个黑色的弹窗一闪而过就消失了,那这就启动就完成了。

在这里插入图片描述

5、然后我们打开浏览器访问:http://localhost 如果出现如下界面则表示nginx服务成功启动!

在这里插入图片描述

6、如果无法正常访问的话可以先查看nginx目录下logs里面的日志文件,

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值