一般的企業都會採用前後端分離的方式來開發、部署項目，這樣做的好處是更好的讓前後臺各司其職。另外也由於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反向代理和負載均衡。
閱讀更多 Justpiano 的文章
