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

成都創(chuàng)新互聯(lián)公司主營凌海網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),凌海h5成都微信小程序搭建,凌海網(wǎng)站營銷推廣歡迎凌海等地區(qū)企業(yè)咨詢

Webpacked 資源

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

資源處理規(guī)則

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

前綴帶~的URL 會被當成模塊請求, 類似于require(‘some-module/image.png'). 如果你想要利用Webpack的模塊處理配置，就可以使用這個前綴。例如，如果你有一個對于assets的路徑解析，你需要使用 <img src="~assets/logo.png"> 來確保解析是對應(yīng)上的。相對根目錄的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')
 }
}

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

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

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

舉個例子，下面的默認值是：

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：assets與static在vue2.0中有什么不同-創(chuàng)新互聯(lián)
本文路徑：http://chinadenli.net/article20/cdojjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站營銷、小程序開發(fā)、微信公眾號、標簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)