vue.js2.0開發中的幾個技巧

標籤：class   conf   tar   title   text   blog   gnu   命令   添加   

最近用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，然後就可以正常使用了。

vue.js2.0開發中的幾個技巧