面試題之assets和static的區別

在項目結構裏，有兩個資源文件的路徑，分別是：src/assets 和 static/。那這兩個到底有什麼區別呢？
簡單的講，static放別人家的，不會變動的，第三方資源(第三方比如jQuery，swiper等)，assets放自己寫的(自己寫的樣式及js文件等)
相同點
assets和static兩個都是存放靜態資源文件。項目中所需要的資源文件圖片，字體圖標，樣式文件等都可以放在這兩個文件下，這是相同點
不同點
assets中存放的靜態資源文件在項目打包時，也就是運行npm run build時會將assets中放置的靜態資源文件進行打包上傳，所謂打包簡單點可以理解爲壓縮體積，代碼格式化。而壓縮後的靜態資源文件最終也都會放置在static文件中跟着index.html一同上傳至服務器。
static中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。因爲避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是static中的資源文件由於沒有進行壓縮等操作，所以文件的體積也就相對於assets中打包後的文件提交較大點。在服務器中就會佔據更大的空間。
建議
將項目中template需要的樣式文件js文件等都可以放置在assets中，走打包這一流程。減少體積。而項目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中，因爲這些引入的第三方文件已經經過處理，我們不再需要處理，直接上傳。
當然具體情況，具體分析，在不同的開發環境，不同的需求下，大家應針對不同具體情況採用合適方式。

詳細回答

1、Webpacked 資源
要回答上面這個問題，我們首先要知道webpack是怎樣打包靜態資源：在*.vue組件中，所有的模板文件和css文件都會被vue-html-loader和css-loader解析，其實就是尋找html和css代碼裏的url路徑，然後進行處理(對相對路徑改成編譯後的路徑)。
舉個例子：在<img src="./logo.png">和background: url(./logo.png)中，"./logo.png"就是一個相對的靜態資源路徑，而且會被webpack解析成模塊依賴。
由於logo.png不是Javascript，所以我們需要用url-loader和file-loader來把它編譯成模塊依賴。
該模板已經爲你配置好loaders，所以你可以免費獲得文件名指紋，條件base64內聯等功能，而且當你使用相對/模塊路徑時不需要擔心部署問題。（這一段比較拗口，簡單說就是已經爲你配置好loaders，你可以放心使用文件路徑和模塊路徑，不用擔心部署時路徑出錯的問題）
由於這些資源可能在構建時被內聯，複製和重命名，所以他們本質上來說是你源碼一部分。這就是爲什麼我們建議將webpack處理的靜態資源和其他源文件一起放在/src目錄下。
實際上，你甚至不需要把他們全都放在/src/assets目錄下，你可以基於使用他們的模塊或者組件去組織文檔結構。例如：你可以將每個組件和屬於他的靜態資源放在它自己的目錄下。
2、資源處理規則
相對URL，例如：./assets/logo.png將會被解析成一個模塊依賴，他們會被一個基於你的webpack輸出配置而自動生成的URL所替代。
無前綴的URL，例如：assets/logo.png將會被看做成相對路徑，並轉換成./assets/logo.png
前綴帶~的URL，會被當成模塊請求，類似於require('some-module/image.png')。如果你想要利用webpack的模塊處理配置，就可以使用這個前綴。例如：如果你有一個對於assets路徑的別名*（在config文件可以配置）*，你需要使用<img src="~assets/logo.png">來確保解析是能對應上的。
相對根目錄的URL，例如：/assets/logo.png是不會被處理的。
3、在JavaScript中獲取資源路徑
爲了能讓webpack返回正確的資源路徑，你需要使用require('./relative/path/to/file.jpg')，由file-loader進行解析，然後返回處理過的URL。例如：
 

[JavaScript] 純文本查看 複製代碼

?

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

注意上面的例子，這種寫法在最終構建時會包含在./bgs/目錄下的所有圖片，這是因爲webpack不能猜出來在運行時會用到其中的哪個圖片，所以會包含所有的圖片。
4、真實的靜態資源
作爲對比，在static/目錄下的文件不會被webpack處理：他們使用相同的文件名（assets下文件的文件名會變），直接複製到最終路徑。你必須使用絕對路徑來引用這些文件，取決於
在config.js裏面加入的build.assetsPublicPath和build.assetsSubDirectory。
舉個例子，下面的默認值是：
 

[JavaScript] 純文本查看 複製代碼

?

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

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