最近用Vue.js開發了幾個專案，Vue的雙向資料繫結和元件化讓我耳目一新，減少了很多底層重複的工作，和基於jQuey的前端開發不起來，基於Vue的開發給我一種酣暢淋漓的感覺。

       下面給出我基於Vue.js做的幾個頁面：爆料頁面、520貴州、百姓關注搶紅包。

       當然，在開發的過程中，不可避免的遇到了一些問題和坑，在此記錄這些問題，積累經驗。

1.測試環境相對路徑的問題

       Vue.js 2.0可以基於wepack構建，如果需要打包生成最終輸出程式碼，直接在DOS視窗中輸入命令：npm run build，就可以了。 但是當我把程式碼部署到測試環境上後，卻發現css、js檔案資源找不到，經過查詢後發現輸出資料夾“/dist”中index.html中引用的css、js檔案相對路徑不對，然後我在網上查詢資源，找到了解決辦法，將build資料夾中webpack.base.conf.js檔案中第17行程式碼改成如下圖所示即可，意思也比較好理解，就是webpack在打包的時候，公共的相對路徑是'../'，這樣就能正確的找到css和js檔案了。

2.本地除錯如何解決跨域的問題

      web前端開發中不可避免的要遇到跨域的問題，特別是當我們在本地除錯頁面，而服務端api介面在測試環境上時，解決跨域的問題，要麼使用jsonp，要麼只能把程式碼部署到測試環境後才能除錯，每改動一次程式碼，都需要部署到伺服器，這無疑效率很低，但是vue.js使用proxyTable很好的解決了這個問題，實際使用時，只需要把config目錄下的index.js中第30行程式碼改成如下：

      然後還需要在http請求的url路徑前面新增"/api"，如下圖：

3.生產環境程式碼不生成map檔案

      使用webpack構建的Vue工程在執行npm run build時預設會生成.map檔案，.map檔案只在除錯階段需要使用，生成環境已經不需要這類檔案，那麼，怎樣才能不生成.map檔案呢？同樣，也是隻需要配置webpack，修改config路徑下index.js檔案， 把productionSourceMap的值改為false即可。

 4.開發環境報“vue 不是內部或外部命令”的問題 

      前段時間在開發一個專案時，開發環境出問題了，一直報"vue不是內部或外部命令"，在網上查詢解決辦法，大部分人都說是環境變數設定錯了，但是我按照他們提供的方法改完後，依然還是報錯，後來在折騰了1天半後，我決定重新安裝vue，然後就可以正常使用了。

       每週一篇部落格，好的習慣要堅持！