vue+element 学习之路(十)vue-cli中assets和static

在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中引用就十分简单了,既可以按照绝对路径引用,也可以按照相对路径引用

在这里插入图片描述
在这里插入图片描述

动态也一样直接绑定即可
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_39327044/article/details/89790594