vue-使用vue-loader加载图资源

一、介绍

在使用vue-cli脚手架初始化项目时，正式的项目一般使用官方的webpack模板，这个模板拥有高级功能的webpack + vue-loader，
以下的项目就是用webpack模板搭建的。

二、环境

• vue2.3.3
• webpack2.6.1

三、vue-loader

vue-loader使用 css-loader 和 Vue 模版编译器自动处理样式和模版文件。在编译过程中，
所有的资源路径例如 <img src="...">、background: url(...) 和 @import 会作为模块依赖。

四、vue-loader编译规则

• 使用绝对路径
• 使用’.’开头的相对路径

• 使用’~’的别名路径

  最常用的就是“相对路径”和“别名路径”，而别名路径更加的方便，对于资源文件和组件的分离很有必要。
  

五、使用方式

1、设置别名

2、加载资源

3、页面如下

六、参考

https://vue-loader-v14.vuejs.org/zh-cn/configurations/asset-url.html
https://github.com/vuejs/vue-loader/issues/193