rose.png

你應該注意到了，在項目結構上我們有靜態資源兩個目錄：src/assets和static/。他們之間有什么區別？

通過webpack處理的資源

首先我們需要了解webpack如何處理靜態資源。在*.vue組件中，所有的html模板和css都會被vue-html-loader和css-loader壓縮并且查找資源路徑。例如，(../logo.png)和background:url(../logo.png)，'../logo.png'是一個相對路徑的資源文件，會被webpack處理成一個模塊依賴。

因為logo.png不是javascript，當要視為一個模塊依賴時，我們需要使用url-loader和file-loader來處理。這個模板已經給你配置了這些loader，所以你可以輕易得到如指紋文件和Base64內聯的功能，同時能夠使用相對路徑，從而不必擔心部署。

因為這些資源可能會在構建過程中被內聯/復制/重命名，它們本質上還是你的一部分源代碼。這就是為什么建議要將通過webpack處理的靜態資源放置到/src目錄、與其余的代碼放在相同的地方。實際上，你甚至都不必將它們放置到/src/assets文件夾中：你可以把他們放到具體的模塊/組件 目錄中來使用。咧如，你可以將每一個組件放到它們自己的目錄中，靠著它們的靜態資源。

資源處理規則

相對路徑url列如.lassets/logo.png會注入到一個模塊依賴中。他們會基于你的webpack輸出配置，自動替換生成的url。無前綴的url，列如assets/logo.png會被視為相同的相對路徑Url，被編譯進./assets/logo.png。 帶有前綴的額url，會作為一個模塊的請求，類似于require('some-module/image.png')。如果你希望當做一個模塊來處理，你就需要使用這個前綴。例如你有一個assets的別名需要處理，你需要使用(~assets/logo.png)來確認別名被注意到。 根目錄相對路徑，例如/assets/logo.png直接不支持這種寫法

獲得JS文件資源路徑

為了使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.js

module.exports = {

build:{

assetsPublicPath: '/',

assetsSubDirectory:'static'

}

}

任何放在在static/的文件都使用絕對的URL /static/[filename]來引用。如果你修改assetsSubDirectory參數成assets，然后這些URL需要變成/assets/[filename]。

總結

以上是生活随笔為你收集整理的vue 项目引用static目录资源_Vue2.0项目入门 — 静态资源目录src/assets和static/区别...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。