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

Posted 2021-06-19 程序媛...

vue中assets和static目录的区别

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

不同点：

一、在打包时候的区别

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

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

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

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

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

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

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

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

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

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

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