Javascript

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

本文主要是介绍面试题系列---【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服务器的哪个位置,在浏览器里都能正确地显示图片。

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

这篇关于面试题系列---【vue中assets和static目录的区别】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!