前端项目部署到Ngnix服务器上

先打包

一个vue前端项目先通过以下命令打包

npm run build

如果打包失败，极大可能的原因是你的前端项目并没有按照工程化去编写写项目，创建项目的时候都没有规范化去创建，之后打包大概率会失败的！

一个vue前端项目是大致的目录结构是这样的

一个前端项目是必须要有node_modules、public、src、.gitinore、package.json、vue.config.js这些文件或文件夹的

但是打包失败跟vue.config.js这个配置文件没有太大关系，除非你之后要webpack打包。 

如果打包成功会生成一个dist文件夹

---

后部署

然后下载ngnix，下载链接：nginx: download

要选择长期稳定版本的

下载好解压之后要存放在没有中文或空格的路径下，如图：

我是22版本的是因为我之前下载过了，就不演示下载的部分了

将打包好的 dist 目录下的文件，复制到nginx安装目录的html目录下

然后双击nginx.exe,默认端口号80

然后按CTRL+shift+Esc打开任务资源管理器查看任务管理器有没有nginx进程，没有则说明打开失败

那么

1. 首先我们看看logs文件夹下error.log的日志信息

2.按win+R，输入cmd回车打开控制台输入以下命令查看哪个进程占用了80端口

netstat -ano | findStr 80

3. 然后按CTRL+shift+Esc打开任务资源管理器查找对应的PID进程，如果惹不起那就改端口号

4.在你之前下载好的ngnix的文件夹下的conf/ngnix.conf文件中更改默认端口号，比如90

 5.改完之后再次查看任务管理器，如果有ngnix.exe的进程说明服务器启动成功

 6.然后在你的浏览器输入localhost:90 然后回车就可以查看你的前端项目了，90就是你改的端口号

这里就以我之前做的黑马的前端项目为例，说明前端项目部署到ngnix服务器上成功了。