Vue项目的打包部署

大家好，欢迎来到IT知识分享网。

一.当前开发模式

前后端分离的开发模式

前端和后端开发人员开发好后，要将前端项目和后端项目分别打包部署在前端服务器和后端服务器上。而当前最为流行的前端服务器为nginx。

二.打包

这样就完成了打包，打包完成后只需要将dist下面的资源部署在服务器上。 

打包后的文件

三.部署

官网上下载 

 下载稳定版。

解压安装在一个没有中文和空格的目录下。

安装完成后打开所在文件夹，其文件夹功能介绍如下：

我们的项目文件（dist中的文件，为静态资源）就要拷贝到html文件夹中，因为html文件夹是静态资源文件目录。

 四.启动nginx

双击后没有任何反应，此时打开任务管理器看是否有nginx任务，如果有，则启动成功，看第六部分。如果没有，则看第五部分。

五.如果nginx启动失败怎么办 

我们打开nginx中的logs日志目录，下面有一个error.log

这里面记录了失败原因，点击查看。 

我们发现80端口号被占用了。

那么是哪个程序占用了80端口号呢？我们进行查看

使用如下命令：netstat -ano | findStr 80

我们发现进程id为4的进程占用了80端口，我们可以打开任务管理器看一下进程id为4的进程是什么进程，如果可以的话把他停掉。 

我们发现是System系统进程占用了80端口，这个我们惹不起，因此采用另一种方法：更换nginx的默认端口号。 

在nginx安装目录中找到conf文件夹，点击进入

打开nginx.conf文件

修改80为其他值(比如90)，保存并退出。 

再次双击nginx.exe，没反应。打开任务管理器，发现有了nginx.exe进程，启动成功。

六.启动部署在nginx上的vue项目

在浏览器中输入localhost:加上你的nginx进程端口号即可启动项目。如此处为localhost:90。