vue静态资源放在src/assets与static目录下的区别
webpack的static和assets目录区别
首先,assets文件夹和static文件夹在vue-cli生成的项目中,都是用来存放静态资源的;
区别:
1.assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式.build时由webpack解析为模块依赖.
2.static目录中的文件并不会被webpack处理:它们会被直接复制到最终的打包目录(默认是dist/static)下.必须使用绝对路径使用这些文件,这是通过在项目/config/index.js文件中的build.assetsPublicPath和build.assetsSubDirectory连接来确定的.在static中文件需要以绝对路径的形式引用:/static.[filename],所以如果需要引用static目录下的图片和其他资源,应该使用绝对路径,webpack配置如下:
总结:
webpack默认将static目录的文件原原本本输出,所以当页面要使用绝对路径时,图片就需要放在static目录。如果用了相对路径,图片仍然放在static,static目录的图片被打包出来也没有多大意义,删了也不会影响图片展示。所以一般assets目录存相对路径用的图片,static存绝对路径用的图片。相对目录的图片在出包后由于被打包进js,不方便更换图片,而绝对路径的图片没有被打包进js而是在static文件夹下,所以可以随时更换。就是网上所说的,static放有可能经常被更换的图片(商品图片之类),assets放组件使用的图片(如一些menu的背景图片等)。其实主要区别在于是以原来的文件目录输出,还是打包进js里面。需要以原文件格式输出的目录可以在webpack中配置,不一定都输出在static目录,具体怎么配置目前还没搞清楚。
更多推荐
所有评论(0)