vue2中assets與static的區別

2021-10-05 06:12:11 字數 882 閱讀 7021

相同點:資源在html中使用,都是可以的。

不同點:使用assets下面的資源,在js中使用的話,路徑要經過webpack中file-loader編譯,路徑不能直接寫。

assets中的檔案會經過webpack打包,重新編譯,推薦該方式。而static中的檔案,不會經過編譯。專案在經過打包後,會生成dist資料夾,static中的檔案只是複製一遍而已。簡單來說,static中建議放一些外部第三方,自己的放到assets,別人的放到static中。

注意:如果把放在assets與static中,html頁面可以使用;但在動態繫結中,assets路徑的會載入失敗,因為webpack使用的是commenjs規範,必須使用require才可以,具體**如下:

html:

"hook"

>

/h3>

直接使用路徑<

/p>

"../../assets/11.png" alt=

"載入失敗" title=

"assets中的"

>

"../../../static/11.png" alt=

"載入失敗" title=

"static中的"

>

動態繫結路徑<

/p>

"assetsurl" alt=

"載入失敗" title=

"assets中的"

>

"staticurl" alt=

"載入失敗" title=

"static中的"

>

<

/div>js:

data()

}

《Vue2 十一》Vue中的混入

mixin用來分發vue元件中可復用的功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時,混入物件的所有選項將被混合進該元件本身的選項。定義區域性混入 定義乙個混入物件 var mymixin methods 定義乙個使用混入物件的元件 var component vue.extend 定...

vue2與vue1的區別

在前面的學習過程中我們已經對vue1有了一定的了解,下面我們來學習一下vue2,看一下vue1與vue2有什麼區別。區別1 在寫 的時候首先要引入的是vue2js檔案。html box button value 新增 click add js window.onload function metho...

vue2與vue3的區別

vue2和vue3開發元件有什麼區別 vue2和vue3雙向資料繫結的區別 vue2的雙向資料繫結是利用es5 的乙個 apiobject.definepropert 對資料進行劫持 結合 發布訂閱模式的方式來實現的。vue3中使用了 es6 的proxyapi 對資料 相比於vue2.x,使用pr...