Vue.js由於其語法簡單,文件友好,而且是一個漸進式框架,因而得到了許多前端開發者的青睞.尤其對初學者而言,入門Vue.js比目前前端三大框架中的另外兩個都容易的多.但是同時,簡單並不意味著低階,把Vue.js弄會還是需要掌握不少東西的,尤其對於沒有接觸過webpack構建工具的初學者.
這裡列舉一些Vue.js常見的開發問題.
1.Vue專案如何部署
Vue.js 的腳手架已經為我們配置好了打包命令,我們只需輸入命令npm run build就會在專案下生成一個dist資料夾,這個dist資料夾下的檔案即是我們需要的,把這些給後端部署到伺服器即可.
2.Vue.js打包後開啟一片空白
如果細心,在此情況下,我們開啟除錯工具,控制檯下會報錯,裡面的靜態檔案都是not found 狀態,看報錯的路徑會發現,index.html裡面引入的路徑都指向了根路徑,這樣如果伺服器上的路徑是根路徑那都沒什麼問題,但是我們通常都是會加專案路徑的,我們通過修改config/index.js裡面的配置即可,我們需要改成相對路徑,靜態檔案都是相對index.html的,所以修改成如下
這樣再次執行npm run build命令得到的結果即是相對index.html的.同理,我們可以將./換成比如www.example.com/test 這樣我們就能得到cdn域名,方便做cdn靜態化部署.
3.Vue打包後背景圖片不見了
這個跟上面的問題差不多,也是路徑問題,在vue-cli中,無論我們用怎樣的相對路徑,最終打包後圖片都會生成到staric/img 路徑下,上一個問題中,我們把所有的靜態資源都是相對./static的,這個是index.html是正確的,但是對css,打包的路徑依然是./static/img 這樣就會出現在app.css檔案中最終的路徑是./static/css/static/img 這樣就發生了錯誤. 實際上,你可能會發現小圖片都沒事,只有大的背景圖片會有這種問題,這是因為vue-cli配置了小於10k的資源打包成base64,所以沒有這個問題. 實際上,如果你使用了路由懶載入功能,也不會出現這個問題,因為路由懶載入最終的css是以style標籤插入到index.html裡面的,所以不會有問題,一種簡單的解決辦法,我們可以把背景圖片的樣式寫成行內樣式,直接在元素上寫style的背景圖片樣式,這樣因為生成的dom是相對index.html的,所以也能解決,另一種我們可以給webpack裡面的css單獨處理路徑,
在build/utils.js檔案的generateLoaders 函式中 加上這個publicPath這個配置項,重新打包即可,這樣在css裡面生成的路徑會是../../static/img 這樣就可以正確的找到路徑了
4.Vue-cli開發如何跨域
用vue-cli開發的時候我們如果調介面會出現跨域問題,好在vue-cli已經內建了proxy外掛,我們正確的配置即可.
,按上述配置,我們呼叫介面
axios.post('/informationService')複製程式碼這樣再次npm run dev開啟專案就沒有跨域問題了.
原文連結 www.noob6.com/archives/11…