Vue站點的搭建之旅

　  背景

　　      好久沒寫博客了,此次博客分享一下最近上班空閒時間作的兩個業餘Demo。分別是V電影App的移動端站點【一直很喜歡用這個APP但是他們沒有出對應的mobile端,因此本身開發一個,網址收藏到個人微信裏面的,平時玩微信的時候用.】和Cnode的移動端站點。這兩次項目也主要是爲了練習一下CSS(由於工做項目中css都是UI來作的,咱們平時就是將他們寫的靜態html頁面放到項目中變成的動態html),和學習一下centos的使用，centos上網站搭建的時候，都是在網上搜索的技術博客一步一步操做的（平時主要.net開發對windows服務器比較熟悉,centos 服務器工做中也沒接觸過）

　   簡單介紹:

1.   使用的Vue2+webpack來開發, 經過gulp-ssh來實現自動部署發佈包.(gulp-ssh很不錯,項目中整合了它，就不用本身手動往服務器上拷貝編譯後的html和js文件了)
2.   服務器購買的是阿里雲的Centos服務器,330元每一年,我的使用徹底足夠了。  點擊跳轉   香港區的不穩定【是香港運營商問題不是阿里雲的問題】,建議購買內地服務器。

 　　　  

           3. 服務端經過tomact+nginx來搭建網站的.

        開發中用到的工具:

            1.  VSCode 項目文本編輯

            2.  Fiddler 用於手機代理抓取V電影App的請求。

            3.  Postman 我的比較喜歡用, 雖然fiddler已經夠用了,可是Postman的保持功能仍是頗有幫助的.(如圖)我會將每一個請求都保存起來方便開發的時候查看接口。

 

服務器端搭建部署:

              1. 安裝tomact:  http://blog.csdn.net/gyming/article/details/36060843

              2. 安裝nginx:  https://www.linuxidc.com/Linux/2016-09/134907.htm

              3. 由於是前端單頁應用,服務端都是調用別的Api,不在一個domain下,V電影的服務器沒有作跨域處理,因此須要經過nginx作反向代理來解決跨域問題,    

 location /movie/apiv3/ {
      proxy_pass https://app.vmovier.com/apiv3/;
}

　　 項目展現: 

             1. V電影:  https://github.com/FourLeafClover/vue-vmovie

                   

 

           2. Cnode: https://github.com/FourLeafClover/vue-cnode