rose.png

你應(yīng)該注意到了，在項(xiàng)目結(jié)構(gòu)上我們有靜態(tài)資源兩個(gè)目錄：src/assets和static/。他們之間有什么區(qū)別？

通過(guò)webpack處理的資源

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

因?yàn)閘ogo.png不是javascript，當(dāng)要視為一個(gè)模塊依賴(lài)時(shí)，我們需要使用url-loader和file-loader來(lái)處理。這個(gè)模板已經(jīng)給你配置了這些loader，所以你可以輕易得到如指紋文件和Base64內(nèi)聯(lián)的功能，同時(shí)能夠使用相對(duì)路徑，從而不必?fù)?dān)心部署。

因?yàn)檫@些資源可能會(huì)在構(gòu)建過(guò)程中被內(nèi)聯(lián)/復(fù)制/重命名，它們本質(zhì)上還是你的一部分源代碼。這就是為什么建議要將通過(guò)webpack處理的靜態(tài)資源放置到/src目錄、與其余的代碼放在相同的地方。實(shí)際上，你甚至都不必將它們放置到/src/assets文件夾中：你可以把他們放到具體的模塊/組件 目錄中來(lái)使用。咧如，你可以將每一個(gè)組件放到它們自己的目錄中，靠著它們的靜態(tài)資源。

資源處理規(guī)則

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

獲得JS文件資源路徑

為了使webpack返回正確的資源路徑，你需要使用require('./relative/path/to/file.jpg')，這樣的話(huà)會(huì)通過(guò)file-loader處理并返回處理過(guò)的url路徑。例如：

computed:{

background(){

return require('./bgs/' + this.id + '.jpg')

}

}

注意上面的例子會(huì)將./bgs/目錄下的每個(gè)圖片最后生成。這是因?yàn)閣ebpack猜不到它們哪個(gè)會(huì)在運(yùn)行時(shí)會(huì)被使用，所以它會(huì)生成所有的文件。

“真的”靜態(tài)資源

相比之下，在static/并非由webpack來(lái)處理：他們是以相同的文件名，直接復(fù)制到他們的最終目標(biāo)目錄。你必須關(guān)注這些文件使用絕對(duì)路徑，這個(gè)通過(guò)config.js文件中的build.assetsPublicPath和build.assetsSubDirectory來(lái)控制。

如下面的例子，會(huì)有如下的默認(rèn)值

//config.js

module.exports = {

build:{

assetsPublicPath: '/',

assetsSubDirectory:'static'

}

}

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。