Vue项目中的assets与static文件夹的差异与区别是什么?(static中会复制,assets中会编译)
在vue的目录结构中,static是静态资源目录,可以用于放置图片、字体等。
而在src目录(开发目录)下,同样提供了一个assets目录,可以用于存放图片,比如logo等。
虽然这两个目录都可以用于放置图片,但是在使用上却是有一些差别的。
相同点:二者都是用来放置静态资源的文件夹
不同点:
(1)访问assets文件夹下的资源文件是使用相对路径
assets下面的资源,在js中使用的话,路径要经过webpack中的file-loader重新编译,使用时要用相对路径进行引用,不能使用绝对路径
注意:
在动态绑定中,assets路径的图片会加载失败,因为webpack使用的是 commenJS 规范,必须使用require才可以
(2)访问static文件夹下的资源文件使用绝对路径
static中的文件是不会经过编译的,打包后会生成dist文件夹,static中的文件只是复制复制一遍而已。
总结:
1.assets中的文件会经过webpack打包,重新编译,建议是存放一些只有组件自己使用到的静态资源。
2.static中的文件不会经过webpack编译,项目在经过打包后会生成dist文件夹,static中的文件只是复制一遍而已,一般建议存放一些外部第三方(公用)的静态资源文件。