nginx+vue实现项目动静分离

一般的企业都会采用前后端分离的方式来开发、部署项目，这样做的好处是更好的让前后台各司其职。另外也由于nginx是一个轻量级的静态资源服务器，其高并发也是其优点之一。这样可以减轻双方服务器的压力，同时又可以做到负载分担。那么接下来就简单介绍下如何通过nginx部署vue项目。

一、vue项目打包：

本人在vue 项目打包的时候遇到一些坑，也是慢慢摸索，才得以解决，

会报这个错，查阅了很多资料，找到一个连接：

https://www.css88.com/doc/webpack2/plugins/uglifyjs-webpack-plugin/

因为UglifyJsPlugin不支持es6，

由于在我的项目里用的是ES6，所以需要安装插件。

然后cnpm i

再打包：npm run build:prod

打包成功

打好的包会在dist文件夹下。

包位置

接下来开始nginx的配置。我先nginx的安装应该不用我说了吧，想了解nginx完整安装过程的可以关注我。

二、首先启动nginx，进入sbin目录下

执行 ./nginx即可启动nginx
ps -ef | grep nginx 查看nginx进程

浏览器输入http://localhost即可打开nginx，说明nginx启动没有问题

三、配置nginx

1、先在nginx的目录下新建一个文件夹，命名为vue，会把vue的安装包dist.zip放在此文件夹下。

进入conf目录，编辑nginx.conf文件

root 填写项目所在nginx下的路径

:wq 保存退出。

2、上传vue包到服务器，告诉大家一个上传的小技巧，让你摆脱xftp、winscp的烦恼；

简单一步操作：yum -y install lrzsz

安装好lrzsz后，只需要输入命令：rz即可从windows传输文件到Linux。

先把vue的dist文件夹打成.zip的包。然后上传到服务器

上传之后解压zip包

解压zip包

然后检查配置文件是否正确。

进入sbin目录下：

./nginx -s reload 平滑重启nginx。

现在就可以进入浏览器访问了，由于监听的是80端口。所以只需输入http://localhost就可以看到页面。当页面访问后台请求时，还需要做反向代理。做分布式的时候还需要配置nginx的负载均衡。下一篇会详细介绍nginx反向代理和负载均衡。