assets與static使用案例剖析

這次帶給大家assets與static使用案例剖析，assets與static使用的注意事項有哪些，以下是實戰案例，一起來看一下。

資源檔案處理

在我們的專案結構裡，有兩個資源檔案的路徑，分別是：src/assets 和 static/。那這兩個到底有什麼差別呢？

Webpacked 資源

為了回答這個問題，我們首先要先理解webpack是怎麼處理靜態資源的。在*.vue元件中，所有的templates和css都會被vue-html-loader 和 css-loader解析，尋找資源的URL。

舉個例子，在 和background: url(./logo.png), “./logo.png”中，都是相對資源路徑，都會被Webpack解析成模組依賴。

由於logo.png不是JavaScript，當被看成一個模組依賴的時候，我們需要使用url-loader 和 file-loader進行處理。這個範本已經配置了這些loaders，所以你能夠使用相對/模組路徑時不需要擔心部署的問題。由於這些資源可能在建置的時候被內聯/複製/重命名， 所以它們本質上是你原始碼的一部分。這就是為什麼我們建議將交由webpack處理的靜態資源和其它原始檔一樣放在/src路徑下面。實際上，你甚至不需要把它們全都放在/src/assets路徑下：你可以基於模組/元件的使用來組織檔案結構。例如，你可以把每個元件和屬於它的靜態資源放在它自己的目錄下。

資源處理規則

相對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的路徑解析，你需要使用 來確保解析是對應上的。相對根目錄的URL, e.g. /assets/logo.png 是不會被處理的

在Javascript中取得資源路徑

為了能讓Webpack回傳正確的資源路徑，你需要使用require('./relative/path/to/file.jpg')，由file-loader進行解析，然後回傳處理過的URL。例如：

computed: {
 background () {
  return require('./bgs/' + this.id + '.jpg')
 }
}

注意上面的例子，在最終的建置時將會包含./bgs/路徑下的所有圖片這是因為Webpack不能猜出來在運行時會用到其中的哪個，所以會包含所有的。

「真實的」 靜態資源

作為對比，在static/下的檔案都不會被Webpack處理：它們使用相同的檔案名，直接拷貝到最終的路徑。你必須使用絕對路徑來引用這些文件，取決於在config.js裡面加入的build.assetsPublicPath 和 build.assetsSubDirectory。

舉個例子，下面的預設值是：

// config/index.js
module.exports = {
 // ...
 build: {
  assetsPublicPath: '/',
  assetsSubDirectory: 'static'
 }
}

所有放在 static/目錄下的檔案都應該是使用絕對URL/static/[filename]引用的。如果你將assetSubDirectory的值改成assets， 那麼這些URL就會被變成/assets/[filename]

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue props傳遞資料如何實現

#SQL正則與mybatis正規使用詳解

#

以上是assets與static使用案例剖析的詳細內容。更多資訊請關注PHP中文網其他相關文章！