vue assets与static的区别
assets
中的文件会经过webpack打包,重新编译,推荐在assets
存放js
等需要打包编译的文件。
static
中的文件,不会打包编译。static中的文件只是复制一遍。static
中建议放一些外部第三方文件,自己的放assets
里,别人的放static
中。(图片推荐放在static里)
在assets与static中放图都可以使用;但动态绑定,assets路径的图片会加载失败,因为webpack使用的是commenJS规范,必须使用require才可以,代码如下:
<div>
<p>直接使用</p> //直接使用都可以
<img src="../../assets/assets1.png" title="assets的图片">
<img src="../../../static/static1.png" title="static的图片">
<p>动态绑定</p> //动态绑定路径static可以直接用,assets需要用require(括起来)
<img :src="assetsurl" title="assets的图片">
<img :src="staticurl" title="static的图片">
</div>
data (){
return {
assetsURL: require('../../assets/assets1.png'),
staticURL: '../../../static/static1.png'
}
}