通常的企業都會採用先後端分離的方式來開發、部署項目，這樣作的好處是更好的讓先後臺各司其職。另外也因爲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反向代理和負載均衡。