Vue中的~（靜態資源處理）

Webpacked 資源

首先要理解webpack是怎樣處理靜態資源的。

在*.vue組件中，全部的templates和css都會被vue-html-loader 和 css-loader解析，尋找資源的URL。

舉個例子，在<img src="./logo.png"> 和 background: url(./logo.png), "./logo.png"中，都是相對資源路徑，都會被Webpack解析成模塊依賴，因爲logo.png不是JavaScript，當被當作一個模塊依賴的時候，咱們須要使用url-loader 和 file-loader進行處理。 該模板已經配置好了這些loaders，因此你可以使用相對/模塊路徑時不須要擔憂部署的問題。

資源處理規則

• 相對URL, e.g. ./assets/logo.png 將會被解釋成一個模塊依賴。它們會被一個基於你的Webpack輸出配置自動生成的URL替代。

• 沒有前綴的URL, e.g. assets/logo.png 將會被當作相對URL，而且轉換成./assets/logo.png

• 前綴帶~的URL 會被當成模塊請求, 相似於require('some-module/image.png'). 若是你想要利用Webpack的模塊處理配置，就能夠使用這個前綴。例如，若是你有一個對於assets的路徑解析，你須要使用<img src="~assets/logo.png">來確保解析是對應上的。

• 相對根目錄的URL, e.g. /assets/logo.png 是不會被處理的。

 

參考：https://athena0304.gitbooks.io/vue-template-webpack-cn/content/static.html