vue开发完成后打包后图片路径不对

用vue做了一个小的移动端项目,从头到尾做下来,感觉自己好多东西都没弄清楚过。也学到了很多,已整理笔记在自己电脑上,但是比较零散,空了再来仔细整理整理。

于是,上周五模拟好数据(接口还未写),准备打包发布到服务器上面看看效果。

这时,真的问题就来了,很多图片没出来,仔细一看,这特么的路径完全不对呀!

虽然以前也做vue, 但是仔细想想,自己还从来没有用vue-cli打包过后来看,一直是在本地边开发边看的。

所以呢,什么都得自己实践,才能学得更多!

废话不多说,直接上自己的代码例子:

之前我也写过,css和js里面引用图片的相对位置不一样。
然而,在vue的js里面操作图片,要记住两点。
首先,图片放到静态文件static里面(下图1中最左下角)
其次,图片的路径写这样写 (我不是很明白,这种‘ ./ ’路径是相对呢还是绝对路径呢?希望大神指点一二),即:./static/img/local.png
不能写这样的相对路径: ../../../static/img/local.png
具体看下图标注:
vue开发完成后打包后图片路径不对
 
类似的还有下面这个:
vue开发完成后打包后图片路径不对
但是对于html里面就不用,如下图:
vue开发完成后打包后图片路径不对
 
同时附上config里面的配置:
vue开发完成后打包后图片路径不对