面试题系列---【vue中assets和static目录的区别】

vue中assets和static目录的区别

相同点===>assets文件夹和static文件夹在vue-cli生成的项目中,都是用来存放静态资源的。

不同点:

一、在打包时候的区别

1.static中的文件是不会经过webpack编译的,一般建议存放一些外部第三方(公用)的静态资源文件。【只支持相对路径形式】

2.assets因为会经过webpack编译,建议是存放一些只有组件自己使用到的静态资源,必须使用【绝对路径】引用这些文件

二、在HTML中使用,两者都可以直接使用路径来访问。

注意的是:在访问assets目录下的资源文件使用的是相对路径,而访问static目录下的资源文件则需要使用绝对路径

三、因为assets下的资源在打包时,需要被webpack编译,如果要在js中使用的话,必须要使用require才能将模块化的静态图片资源加载进来(引用依赖),否则图片加载失败

补充:相对路径和绝对路径的区别

1.绝对路径是指文件在硬盘上真正存在的路径。

缺点 :在自己的计算机上 浏览可能会一切正常,但是上传到Web服务器上浏览就很有可能不会显示图片了。

2.相对路径,就是相对于自己的目标文件位置

  • 优点:两个文件的相对位置没有变(也就是说还是在同一个目录内),那么无论上传到Web服务器的哪个位置,在浏览器里都能正确地显示图片。

  • ​ 相对路径里常使用“../”来表示上一级目录。如果有多个上一级目录,可以使用多个“../”;"./"表示当前目录,一般可以省略

上一篇:What's New In Zeebe: Scaling Zeebe, New Client APIs, Faster Requests, Timestamps, NodeJS Client


下一篇:fastadmin列表页 修改 正序排列 倒序排列 desc asc