第三方web ide開發環境下vuejs開發HMR環境搭建-碼農這樣開發是快樂的！

vuejs是一個很是優秀的前端框架，利用該框架能夠快速開發出任何web app，之因此vuejs開發很是高效快捷，其中最重要的一點就是利用webpakc提供的HMR（熱模塊替換）特性，能夠邊寫vue組件，邊實時看效果。

而不少時候，雖然本地咱們可能已經搭建了vuejs的開發環境，可是不少時候咱們須要作一個小小的實驗，不但願對本身開發環境有污染。另外咱們知道開發環境最穩定兼容性最好的環境仍是linux，咱們雖然能夠搭建本身的linux開發環境，可是並非每一個時候都適合化大量時間去搭建環境，所以咱們須要一個快速啓動的linux開發測試環境。這幾種狀況下，第三方的web ide就是一個很是好的手段。

其中codeanywhere 就是一個很是優秀的表明，其環境本質上是用linux的docker容器構建出來的，每個人的環境都是一個獨立隔離的容器環境，能夠隨時啓動開始寫代碼調試看效果，不用的時候就能夠關閉或者刪除。

可是在使用這種web ide時有幾個須要解決的問題:

1. 因爲容器是在防火牆的後面，而咱們webpack構建後的serve url port外界沒法訪問

這一點比較好解決，由於codeanywhere已經考慮到這個方面，可使用http://port-xx.yy.com/的方式路由到codeanywhere,它內部作NAT轉換能夠訪問到後端的serve entry.

但其中有一點須要注意，必須將host選項設定爲0.0.0.0這樣webpack-dev-server容許從外網進來的訪問

2.一樣因爲容器在防火牆後面，webpack-dev-server構建的bundle沒法訪問

雖然經過第1.點雖然能夠經過http://port-xx.yy.com的方式可以訪問到相似http://localhost:8080效果的網頁，可是該網頁中對bundle的引用卻沒法自動重寫爲 http://port-xx.yy.com/yourbundle.js ，而永遠是相似 http://port-xx.yy.com/yourbundle.js 這樣的形式，這是最大的問題。原本我搞來搞去但願經過 public: 'http://port-xx.yy.com' 的方式來解決，可是卻發現配置無效。

結合我之前研究過的ssh port forwarding這個知識點，以爲很是適合解決這個問題，最後作了不少實驗，確認這個方案可行。

下圖是整個拓步：

經過構建瀏覽器所在的開發主機經由webide容器主機暴露的互聯網ip及端口到web-dev-server的隧道，之後在調測時直接經過http://localhost:8080就能夠了，由於

在開發主機瀏覽器中輸入上述url後，直接就被route路由到了web-dev-server上，不管是 / 仍是 /bundle.js 都經過這條路訪問，這就完美解決了web-dev-server沒法訪問的問題。

其中上圖中須要注意的是host22爲web-dev-server所在的容器主機的hostname，8080爲webpack-dev-server的serve端口

3. webpack-dev-server構建的bundle可能須要不少ajax請求，這時如何可以proxy到本身的backend(多是laravel,多是nodejs express開發)

對於在vue開發時前端ajax請求，能夠經過web-dev-server對應的proxy配置選項來指定當瀏覽器訪問http://localhost:8080/yourapientry/xx時將由

web-dev-server自動proxy訪問你的後端，隨後返回數據再經過上面的ssh隧道返回到開發主機瀏覽器.

devServer: {
        hot: true,
        host: 0.0.0.0,
        port: 8080,
        proxy: [
            {
                context: ['/apidata','/admin'],
                target: 'http://yourbackend.com',
                changeOrigin: true,
                secure: false,
                logLevel: 'debug'
            }
        ]
}

4. 若是你但願你的後端也在你本機上，這時還有更加複雜的配置過程

這裏只提一下須要使用sock代理，經過一個公網跳板反向打洞到你本機的後端，這樣vue組件ajax訪問實際上訪問到你本身的主機。因爲相對更加複雜，感興趣的同窗能夠搜索更多sock方面的內容，也能夠私聊我深刻溝通。

通過這幾個步驟，我實現瞭如下開發環境:

1.vue前端開發徹底在webide上進行；

2.一樣實現了HMR的高級開發體驗;

3.你能夠隨時安裝一些lib，作一些實驗，確認ok後再真正將代碼拉回到本地開發環境;

4.後端數據依然由本身的主機後端提供，我使用的是laravel

這樣就能夠先後端分離開發，同時又不怕實驗環境因爲某些垃圾庫而被污染