通常的企业都会采用先后端分离的方式来开发、部署项目，这样作的好处是更好的让先后台各司其职。另外也因为nginx是一个轻量级的静态资源服务器，其高并发也是其优势之一。这样能够减轻双方服务器的压力，同时又能够作到负载分担。那么接下来就简单介绍下如何经过nginx部署vue项目。css
1、vue项目打包：vue
本人在vue 项目打包的时候遇到一些坑，也是慢慢摸索，才得以解决，webpack
会报这个错，查阅了不少资料，找到一个链接：nginx
https://www.css88.com/doc/webpack2/plugins/uglifyjs-webpack-plugin/es6
由于UglifyJsPlugin不支持es6，web
因为在个人项目里用的是ES6，因此须要安装插件。npm
而后cnpm iwindows
再打包：npm run build:prod后端
打包成功浏览器
打好的包会在dist文件夹下。
包位置
接下来开始nginx的配置。我先nginx的安装应该不用我说了吧，想了解nginx完整安装过程的能够关注我。
2、首先启动nginx，进入sbin目录下
执行 ./nginx便可启动nginx
ps -ef | grep nginx 查看nginx进程
浏览器输入http://localhost便可打开nginx，说明nginx启动没有问题
3、配置nginx
一、先在nginx的目录下新建一个文件夹，命名为vue，会把vue的安装包dist.zip放在此文件夹下。
进入conf目录，编辑nginx.conf文件
root 填写项目所在nginx下的路径
:wq 保存退出。
二、上传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反向代理和负载均衡。