VUE中src/assets與static的區別和打包時的區別

參考：https://www.jianshu.com/p/8341edbc7436

src/assets和static兩個都是存放靜態資源文件。
src/assets中存放的靜態資源文件在項目打包時，也就是運行npm run build時會將assets中放置的靜態資源文件進行壓縮打包上傳，
因此使用assets下面的資源，在js中使用的話，路徑要經過webpack中的file-loader編譯，引用時需要使用相對路徑或者模塊路徑，
例如：../assets/logo.png
而動態引用路徑時寫法：require("../assets/logo.png")

static中放置的靜態資源文件就不會要走打包壓縮格式化等流程，而是直接進入打包好的目錄，直接上傳至服務器。
即該目錄下的資源不會被 webpack 處理，它們會被直接復制到最終的打包目錄下（默認地址是 dist/static），所以引用時需要使用絕對路徑。
因為避免了壓縮直接進行上傳，在打包時會提高一定的效率，但是static中的資源文件由於沒有進行壓縮等操作，
所以文件的體積也就相對於assets中打包后的文件提交較大點。在服務器中就會占據更大的空間。
該目錄下文件的絕對路徑寫法：/static/filename

若把圖片放在assets和static中，html頁面中都可以使用；
但是在動態綁定中，assets路徑的圖片會加載失敗，
因為webpack使用的是 ` commenJS ` 規范，必須使用require才可以

<div class="myDemo">
    // 直接顯示文件內容
    <h5>直接路徑</h5>
    
    <img src="../assets/logo.png" title="assets中的圖片">
    <img src="/static/logo.png" title="static中的圖片">
    
    // 動態顯示文件內容
    <h5>動態路徑</h5>
    
    <img :src="asetUrl" title="assets中的圖片">
    <img :src="sticUrl" title="static中的圖片">
</div>
export default {
    name: 'myDemo',
    data (){
      return {
        asetUrl: require('../assets/logo.png'),
        sticUrl: '/static/logo.png'
    }
}

總的來說：
    assets:編譯過程中會被webpack處理理解為模塊依賴,只支持相對路徑的形式.assets放可能會變動的文件.
    static:存放第三方文件的地方,不會被webpack解析,會直接被復制到最終的打包(默認是dist/static)下,必須使用絕對路徑引用這些文件.static放不會變動的

所以簡單點使用建議如下：
static中建議放一些外部第三方，因為這些引入的第三方文件已經經過處理，我們不再需要處理，直接上傳。
自己項目中的一些js、css放到assets中。即：自己的文件放在assets，別人的放在static中