vue中assets和static目錄的區別

在vue的目錄結構中，static是靜態資源目錄，可以用於放置圖片、字體等。而在src目錄（開發目錄）下，同樣提供了一個assets目錄，可以用於存放圖片，比如logo等。雖然這兩個目錄都可以用於放置圖片，但是在使用上卻是有一些差別的。

在HTML中使用

在HTML中使用，兩者都可以直接使用路徑來訪問。

<img src="../assets/yanggb.png" alt="yanggb" title="assets中的圖片">
<img src="/static/yanggb.png" alt="yanggb" title="static中的圖片">

要注意的是，訪問assets目錄下的資源文件使用的是相對路徑，而訪問static目錄下的資源文件則需要使用絕對路徑，具體原因在后面說。

在JS中使用（動態綁定）

assets下的資源如果要在js中使用的話，路徑需要經過webpack中的file-loader編譯，如果直接編寫路徑會導致加載資源失敗（找不到資源）。

<template>
    <div>
        <img :src="assetsUrl" title="assets中的圖片">
        <img :src="staticUrl" title="static中的圖片">
    </div>
</template>

export default {
    name: 'yanggb',
    data () {
        return {
            assetsUrl: require('../assets/yanggb.png'),
            staticUrl: '/static/yanggb.png'
        }
    }
}

因為webpack使用的是commonJS規范，因此必須要使用require才能將模塊化的靜態圖片資源加載進來（引用依賴）。

在打包時候的區別

在vue的組件中，所有的模板和css都會被vue-html-loader和css-loader解析，並查找資源的url，比如在<img src="./yanggb.png">中，該url是相對的資源路徑，就會由webpack解析為模塊依賴，而因為yanggb.png不是js，當被視為模塊依賴的時候，就需要使用url-loader和file-loader來處理它。因為vue-cli的webpack腳手架中已經配置了這些loader，因此可以使用相對/模塊路徑來訪問這些資源文件。

由於這些資源在webpack構建的過程中可能會被內聯/復制/重命名，因此它們可以視作是源碼的一部分，這也是為什么建議要將webpack處理的靜態資源放在src中和其他的源文件放在一起的原因。事實上，這些資源文件甚至可以不必放到src/assets目錄下，而是放置到每個放置組件的目錄下，使用模塊/組件的組織方式使用它們。

相比之下，在static下目錄下面的文件是不會被webpack處理的，這些資源文件會被直接復制到最終的打包目錄下面（默認是dist/static），且必須使用絕對路徑來引用這些文件。這一特性是通過在config.js文件中的build.assetsPublicPath和build.assetsSubDirectory鏈接來確定的。

有時我們需要修改node_module目錄中的源碼，在插件源碼修改后，打包后的文件應放在static目錄。如果放在其他目錄，webpack會重新打包，可能導致出現例如【did you register the component correctly? 】這樣的組件報錯。

總結

1.static中的文件是不會經過webpack編譯的，一般建議存放一些外部第三方（公用）的靜態資源文件。

2.assets因為會經過webpack編譯，建議是存放一些只有組件自己使用到的靜態資源。

 

"你自人山人海中而來，原來只為了給我一場空歡喜。"