我的代码:
// html代码
<div class="col-xs-5" v-for="item in aTheme">
<img :src="item.src" class="img-thumbnail">
<p class="detail">{{ item.title }}</p>
</div>
// data返回的数据
aTheme: [{
src: '../../assets/images/theme-default.png',
title: '默认主题'
}, {
src: '../../assets/images/theme-custom.png',
title: '自定义主题'
}]
运行项目发现报错：theme-custom.png:1 GET http://localhost:8080/assets/images/theme-custom.png 404 (Not Found)
原因是在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，然后npm run dev 或者npm run build之后导致路径没有被加工
我的解决办法是加一个动态引入require()：
aTheme: [{
src: require('../../assets/images/theme-default.png'),
title: '默认主题'
}, {
src: require('../../assets/images/theme-custom.png'),
title: '自定义主题'
}]
然后重新build一下项目, 运行之后发现就好使了. 下面有一个实时build搭建项目解析资源的方法：
在webpack执行命令之后可以添加一些参数，这些参数都有自己的作用，下面是参数列表：
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
$ webpack --watch //监听变动并自动打包
$ webpack -p//压缩混淆脚本，这个非常非常重要！
$ webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了其中的
$ webpack --progress //显示进度条
$ webpack --color //添加颜色
-p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb （主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大） 。
这里我们重点说一下 webpack --watch这个参数，这个参数就要的作用就是监听文件是否有改变，有改变就会重新编译有改变的文件。
我在我的package.json文件中，加入了这些字段，完成自动编译，这样热更新也都有了完全不用再考虑手动start手动build了
"build": "webpack -d --progress --watch --display-error-details --devtool cheap-source-map"
其他关于webpack的配置可以查看我的这边文章哦→Vue 2.x + Webpack 4.x的那些事---萌新必备
