今天就跟大家聊聊有關(guān)assets與static在vue2.0中有什么不同，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括瑪沁網(wǎng)站建設(shè)、瑪沁網(wǎng)站制作、瑪沁網(wǎng)頁(yè)制作以及瑪沁網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，瑪沁網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到瑪沁省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

Webpacked 資源

為了回答這個(gè)問(wèn)題，我們首先需要理解webpack是怎樣處理靜態(tài)資源的。在*.vue組件中，所有的templates和css都會(huì)被vue-html-loader 和 css-loader解析，尋找資源的URL。

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

由于logo.png不是JavaScript，當(dāng)被看成一個(gè)模塊依賴的時(shí)候，我們需要使用url-loader 和 file-loader進(jìn)行處理。 該模板已經(jīng)配置好了這些loaders，所以你能夠使用相對(duì)/模塊路徑時(shí)不需要擔(dān)心部署的問(wèn)題。由于這些資源可能在構(gòu)建的時(shí)候被內(nèi)聯(lián)/復(fù)制/重命名， 所以它們從本質(zhì)上來(lái)說(shuō)是你源碼的一部分。這就是為什么我們建議將交由webpack處理的靜態(tài)資源和其它源文件一樣放在/src路徑下面。實(shí)際上，你甚至不需要把它們?nèi)挤旁?src/assets路徑下：你可以基于模塊/組件的使用來(lái)組織文件結(jié)構(gòu)。例如，你可以把每個(gè)組件和屬于它的靜態(tài)資源放在它自己的目錄下。

資源處理規(guī)則

相對(duì)URL, e.g. ./assets/logo.png 將會(huì)被解釋成一個(gè)模塊依賴。它們會(huì)被一個(gè)基于你的Webpack輸出配置自動(dòng)生成的URL替代。沒(méi)有前綴的URL, e.g. assets/logo.png 將會(huì)被看成相對(duì)URL，并且轉(zhuǎn)換成./assets/logo.png

前綴帶~的URL 會(huì)被當(dāng)成模塊請(qǐng)求, 類似于require(‘some-module/image.png'). 如果你想要利用Webpack的模塊處理配置，就可以使用這個(gè)前綴。例如，如果你有一個(gè)對(duì)于assets的路徑解析，你需要使用 來(lái)確保解析是對(duì)應(yīng)上的。相對(duì)根目錄的URL, e.g. /assets/logo.png 是不會(huì)被處理的

在 Javascript中獲取資源路徑

為了能讓W(xué)ebpack返回正確的資源路徑，你需要使用require(‘./relative/path/to/file.jpg')，由file-loader進(jìn)行解析，然后返回處理過(guò)的URL。例如：

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

注意上面的例子，在最終的構(gòu)建時(shí)將會(huì)包含./bgs/路徑下的所有圖片 這是因?yàn)閃ebpack不能猜出來(lái)在運(yùn)行時(shí)會(huì)用到其中的哪個(gè)，所以會(huì)包含所有的。

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

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

舉個(gè)例子，下面的默認(rèn)值是：

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

所有放在 static/目錄下的文件都應(yīng)該是使用絕對(duì)URL/static/[filename]引用的。如果你將assetSubDirectory的值改成assets， 那么這些URL就會(huì)被變成 /assets/[filename]

看完上述內(nèi)容，你們對(duì)assets與static在vue2.0中有什么不同有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。