在vue-cli中,assets和static都是存放静态文件的目录,区别在于,static中的文件不会被webpack处理,可以直接以绝对路径引用,而assets中的文件会被webpack打包进代码中,相当于代码的一部分,只支持相对路径引用,bulid的时候由webpack解析为模块依赖。
webpack处理静态资源的机制:在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在 img src=”./logo.png” 和background: url(./logo.png) 中./logo.png是一个相对资源路径,并且会被Webpack视为一个模块依赖来解析。
举个栗子
assets 和 static下分别有logo.png
(1)assets
静态图片引用,正常显示
动态图片引用,图片无法读取
因为此时图片已经被当成代码的一部分,所以引入时必须用require以模块的形式引入
再来,图片正常显示
(2)static
static中引用就十分简单了,既可以按照绝对路径引用,也可以按照相对路径引用
动态也一样直接绑定即可