vue中assets和static目录的区别
相同点===>assets文件夹和static文件夹在vue-cli生成的项目中,都是用来存放静态资源的。
不同点:
一、在打包时候的区别
1.static中的文件是不会经过webpack编译的,一般建议存放一些外部第三方(公用)的静态资源文件。【只支持相对路径形式】
2.assets因为会经过webpack编译,建议是存放一些只有组件自己使用到的静态资源,必须使用【绝对路径】引用这些文件
二、在HTML中使用,两者都可以直接使用路径来访问。
注意的是:在访问assets目录下的资源文件使用的是相对路径,而访问static目录下的资源文件则需要使用绝对路径
三、因为assets下的资源在打包时,需要被webpack编译,如果要在js中使用的话,必须要使用require才能将模块化的静态图片资源加载进来(引用依赖),否则图片加载失败
补充:相对路径和绝对路径的区别
1.绝对路径是指文件在硬盘上真正存在的路径。
缺点 :在自己的计算机上 浏览可能会一切正常,但是上传到Web服务器上浏览就很有可能不会显示图片了。
2.相对路径,就是相对于自己的目标文件位置
-
优点:两个文件的相对位置没有变(也就是说还是在同一个目录内),那么无论上传到Web服务器的哪个位置,在浏览器里都能正确地显示图片。
-
相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录,可以使用多个“../”;"./"表示当前目录,一般可以省略