windows平台上通过Nginx部署Vue项目

windows平台上通过Nginx部署Vue项目

公司项目使用 ruoyi_cloud 微服务快速平台开发，前端用的是 ant design vue 今天临时需要部署前端，同事忙不过来，我就操刀上了；做为一个以前仅仅在 Linux 上简单玩过 Nginx 的小白，刚开始还是比较懵逼的，公司这次部署是在windows平台上，网上一顿查资料，也算是完成任务了，其实挺简单的；遂简单记录下，以备以后查阅，也希望能帮到遇到同样问题的小伙伴

1. 首先去 Nginx 官网下载 Nginx软件包，最好选择 Stable 稳定版，别忘了是 windows版本，下载好后直接解压到任意目录即可
2. 部署项目涉及的仅仅是 nginx 的配置文件nginx.conf 和几个常用的命令
   配置文件 nginx.conf 在解压后的 conf 目录下，该文件就是 nginx的默认配置文件，后续项目的部署仅需要一点修改即可
   部署用到的几个命令：

命令	作用
nginx -t	检查 nginx 配置文件是否配置成功，在启动服务之前执行
start nginx	启动 ngnix 服务
nginx -s reload	重新加载配置，并重启进程，一般是在配置文件修改后，让修改生效
nginx -s quit	关闭Nginx服务
nginx -s stop	强制关闭Nginx服务

3. 先启动 Nginx 测试下，在 Nginx目录下打开 cmd 命令行，先 nginx -t 测试下配置
   
   看到如上的输出，说明配置语法正确，下来就可以输入 start nginx 启动了，nginx 默认是监听 80 端口，浏览器中键入 localhost:80
   
   出现如上页面，说明 windows上 nginx 启动成功，下来只需要修改配置就行了
4. 打开配置文件 nginx.conf ，修改配置
   
   只需修改 server里的配置即可，nginx 监听端口根据自己情况配置（别冲突就好），location 处的配置我直接修改了原配置，也可以再添加一个 location ，此处 root 指向的就是 nginx根目录下的 html目录，这里我在原配置后添加了一个dist，所以只需要将打包好后的文件夹放在 html目录下即可
   
   此时 nginx 就在8888端口监听，直接访问该端口就会路由到项目前段的静态页面； nginx -s reload 重新加载修改后的配置文件，浏览器访问 localhost:8888
   
   页面已经成功加载上了，此时静态页面配置就可以了，但是可以看到验证码加载不到，这是因为验证码请求的是后端的服务，我们现在是通过 nginx 访问的前端页面，写在前端代码中的路由配置是无法路由到后端服务的，所以还需要添加一个 location 的配置
   
   该配置是将前端 vue项目中的所有后端请求都代理到内网的网关服务（微服务项目的所有后端请求都要走网关，通过网关进行分发），上面的 location 配置的前缀和 proxy_pass 的内网网关地址根据 vue 项目中 vue.config.js 配置文件中具体情况修改即可；改完了重新加载配置 nginx -s reload
   再次访问页面
   
   验证码成功加载，说明已经可以正常路由到后端服务了；至此，完成了 Vue项目在 Nginx上的部署