Vue2.0全家桶项目踩的坑(一)

最近在学习了Vue2.0的全家桶之后，决定做一个实际的小项目来巩固和加深对Vue的理解，然后看到网上太多的点餐平台，播放器之后，决定做一个网络小说阅读器。本次开发采用了Vue全家桶，也就是Vue2.0+Vue-Router+Vuex.在项目过程中，遇到了一些问题，所以想写篇文章，记下来。

本地图片引入失败问题

图片在引入的时候，如果使用的是网络图片，可以和轻松的引入，但如果使用本地图片，就可能造成引入失败。

路径问题

在实际开发中，常常使用有两种图片的引入方式，比如![](./assets/logo.png),这种直接引入图片地址的方式，非常简单，但不方便图片的更换。或者是采用![](imgUrl)这样绑定数据的方式引入地址，这样只需要改变imgUrl的值就可以修改引入图片。还有一种可能会错用的![]({{ imgUrl }}),这种方式是错误，既想采用数据绑定方式又忘记使用v-bind命令。
而如果我们想采用数据绑定的方式引入本地图片,可能和预想的结果会不一致,我们引入src/assets/目录下的logo.png,给imgUrl赋值
imgUrl: './assets/logo.png'
这样看似能够引入图片，然而实际效果却是

图片路径错误

可以很容易看出是因为路径错误的原因，只要解决这个问题，那图片自然就可以引入了

问题解决

移动图片

既然知道了问题的罪魁祸首是路径，那只要修改图片位置，让网页不在把根域名作为相对路径的根目录，这时候我们观察生成vue-cli目录结构，会发现一个static目录，该目录的作用就是存放纯静态资源 (打包时直接拷贝到dist/static/里面)，所以我们可以把图片放进这个目录
imgUrl: './static/logo.png'
这样实际效果就出来了，绑定成功

传入图片编码

除了移动图片之外，我们还可以采用传入图片编码的方式，即imgUrl = require('./assets/logo.png'),这样也能得到正确的引用，但这样处理的缺点的是不灵活，改变图片的时候比较麻烦。