vue static和assets的區別

2022-07-26 17:06:11 字數 933 閱讀 2275

static和assets的區別,原理就在於webpack是如何處理靜態資源的

1)在vue元件中,所有模板和css都會被vue-html-loader和css-loader解析,並查詢資源url。

例:或者  background: url("./logo.png")

因為./logo.png是相對的資源路徑,將會由webpack解析為模組依賴;

2)由於logo.png不是js,當被視作模組依賴時,需要使用url-loader和file-loader處理它,vue-cli已經配好了這些loader(webpack)因此可以使用相對/模組路徑。

3)由於這些資源可能在構建過程中被內聯、複製、重新命名,所以它們基本是**的一部分,即webpack處理的靜態資源放在/src目錄中,和其它資源檔案放在一起。

事實上,不必把它們全部放在/src/assets檔案下,可以使用"模組/元件"的組織方式來使用它們

例:可以在每個放置元件的目錄中存放靜態資源。

1)static目錄下的檔案並不會被webpack處理,它們會直接複製到最終目錄(dist/static)下。

必須使用絕對路徑引用這些檔案,這是通過在config.js的build.assetspublicpath和nuild.assetssubdirectory連線確定的。

2)任何放在static/的檔案需要以絕對路徑形式引用:/static/[name]。

如果更改assetssubdirectory的值為assets,那麼路徑需更改為:/assets/[filename]。

assets裡面的資源會被webpack打包進**,static裡面的資源就直接引用了;

一般在static裡放一些類庫的檔案,assets放屬於專案的資源檔案。

說的再通俗一點,就是static放別人家的資源,assets放自己家的資源。

Androidstudio中Asset的建立和引用

一 建立 這樣就在main資料夾下建立了乙個和res資料夾同級的assets資料夾了 二 使用 1.載入assets目錄下的網頁 載入assets win8 demo 目錄下的index.html網頁 webview.loadurl file android asset win8 demo inde...

Asset資源鏈結 變的更好看

1.to be firendly url,not ugly url 在 hivemodul xml檔案中增加下列 contribution configuration id tapestry.url.serviceencoders asset encoder id asset path assets...

前端學習 vue中public與assets的區別

一.public和assets檔案的異同 1.相同點 資料夾中的資源在html中使用都是可以的。2.不同點 使用assets下面的資源,在js中使用的話,路徑要經過webpack中的file loader編譯,路徑不能直接寫。使用public檔案下面的資源,是不會被webpack處理的,它們會被直接...