首先,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目录，具体怎么配置目前还没搞清楚。