Vue引入静态资源<a href="https://cli.vuejs.org/zh/guide/html-and-static-assets.html#%E5%A4%84%E7%90%86%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90">官方文档</a>
1、在js被导入或者在vue的template以及css中通过相对路径引入的,这样会被webpack处理
2、放在public通过绝对路径引入,这类资源将会直接被拷贝
引入图片示例
1、相对路径引入
<img src="../assets/img/logo.png" />
//经过编译之后
<img src="data:image......." />
2、使用v-bind指令
<img :src="require('../assets/img/logo.png')" />
<img :src="imgUrl" />
//在js定义imgUrl属性
imgUrl:'http://blog.phpfs.com/xxxx.png'
使用:src是v-bind:src的缩写,这样的是后面是可以写变量,注意如果变量是相对路径引入的图片,这样的也不会编译
3、使用绝对路径引入
<img src="/static/img/icon.png" />
编译后
<img src="/static/img/icon.png" />
用绝对路径引入图片资源都会简单复制到编译后的目录中,不经过webpack处理。