项目前端使用vue绘制页面，后端使用express编写界面。在部署项目之前，做好准备工作。前端vue项目npmrunbuild要打包生成dist文件夹，同时要安装nginx。下面继续看步骤：第一步找到nginx的安装目录，然后修改nginx的服务配置文件，也就是nginx安装目录下conf文件夹下的nginx.conf文件。我们用vscode打开，添加最后的serve{}配置我们需要的反向代理，接下来就是写对应的nginx配置代码了。第二步，我们更喜欢5678这个数字，所以我们把自己电脑上的5678端口开放给用户使用。即：我们使用nginx这个工具（sentinel）来监听本机的5678端口，当有用户访问这个端口时，我们会给出相应的反馈。所以对应的nginx代码：listen5678第三步假设我们电脑的ip是10.9.26.121，因为我们用自己的电脑作为服务器部署项目。所以对应的nginx代码：server_name10.9.26.121第四步，当用户访问我们的ip端口时，即：当用户访问：10.9.26.121:5678时，因为sentinel工具nginx一直在监控监视这个ip端口.所以当nginx收到ip端口的访问请求时，会转发该请求，或者定位到我们前端vue项目打包好的dist文件中。dist文件夹中存放的是我们编写的前端页面代码。代码解析执行后，用户就可以看到前端页面了。因为程序执行需要找到对应的文件代码位置，所以root就是存放对应前端打包代码dist的位置。至于dist入口，就不用赘述了，肯定是index.html。对应的nginx代码如下：location/{rootD:/nginx-1.18.0/html/personManage/dist;索引index.html；比如上面的root是，我把vue打包的dist文件放在电脑D盘这个目录的位置是D:/nginx-1.18.0/html/personManage/dist但是注意这里有一个坑：如果我们直接复制文件地址栏中dist文件的地址，复制的结果是错误的。误操作如下图：我们最后复制到的是这个地址：D:\nginx-1.18.0\html\personManage，如果我们把这个地址直接放在root后面，运行nginx后会显示500InternalServerError，因为这是在文件夹中查找程序代码，所以需要使用正斜杠/，这样nginx才能识别，即解决方法是：修改为：D:/nginx-1.18.0/html/personManage/dist（毕竟windows喜欢用反斜杠\，而Nginx只用正斜杠/）第五步是因为前端vue项目中的ajax交互跨域解决方案使用了devServer中的proxy代理vue.config.js，因此nginx也需要一个定位来处理前端的跨域请求转发问题，所以proxy中的跨域转发前缀必须和nginx中的跨域转发前缀保持一致，以便正常实现页面界面交互。示意图如下：最终nginx代码#personManage项目历史路由模式server{listen5678;#用户使用5678端口，监听server_name10.9.26.121;#本地服务器的ip地址为：10.9.26.121client_max_body_size100m;#上传大文件配置，nginx默认为20M容量，如果要上传更大的文件，需要额外设置location/{#定位到具体的文件入口try_files$uri$uri//index.html;#解决vue中history路由方式，部署后刷新页面404问题，hash路由方式不需要rootD:/nginx-1.18.0/html/personManage/dist;#前端代码dist文件所在的磁盘目录位置indexindex.html;#dist文件夹下的入口文件index.html}location/api/{#处理前端跨域转发请求#我们后端express服务开启的端口是9999，所以这里转发到这个地址proxy_passhttp://10.9.26.121:9999/;#下面三句是Theproxy_set_headerHost$host用来获取用户访问的ip；proxy_set_headerX-Real-IP$remote_addr;proxy_set_headerX-Forwarded-For$remote_addr;}}后端express使用9999端口，代码：app.listen(9999,(req,res)=>{console.log('后端服务端口地址为：localhost://9999')})第六步因为我们使用的后端是node中的express框架，不是java框架中的springboot什么的，我们不需要做jav包，我们只需要使用express中的pm2插件来管理我们的后端项目.6.1全局安装pm2npminstall-gpm26.2在使用pm2启动express项目之前，我们用来启动express项目的命令是nodeapp.js，但是有局限性，所以我们使用pm2插件来管理后端快递项目。pm2功能强大，包括启动时自启动项目、停止项目、进程管理、负载均衡、日志查看等功能，而nodeapp.js只能启动项目，使用pm2进行管理更方便。全局安装pm2后，我们执行pm2-v命令可以看到版本号，说明我们安装成功，然后执行pm2startapp.js启动项目。出现下图，说明我们的服务已经启动，接下来用户就可以正常访问了。以上就是nginx部署一个vue+express项目的流程步骤。如果想了解更多pm2插件的使用细节，可以到pm2官网。附上传送门：https://pm2.keymetrics.io/
