使用Vue2.0时经常出现的一个问题就是找不到图片路径，但在VSCode插件能识别到图片
这是因为vue-cli自动的继承了webpage的一些配置，比方说在每次更改时我们并没有使用liveserve也会自动刷新，是因为它利用了webpage里面的热加载的插件起到的这个效果，同时它也利用其他的插件做一些其他的功能，比如给文件改名的功能。
为什么要给文件改名
给文件打包上线以后，如果用户经常访问没必要每次都重新获取图片和JS/CSS文件，浏览器是有缓存机制的，如果几次请求的文件名字相同的话就不会真的再向服务器要文件，而是会把之前请求过的文件缓存在自己的浏览器的存储空间里面，然后直接去拿已经缓存的文件而不会向服务器要新的文件。
那么就会有一个问题，如果你的项目更新了但是你只是更新了文件里面的内容而没有更新名字，然后你又重新发布上线，而用户缓存在本地的还是上一个版本的文件的内容，但是因为文件名不变，导致你的更新在用户的电脑上没有生效，所以我们为了解决这个问题，每一次打包上线都把名字改的和之前不一样，这样你的更改就会同步到用户的电脑上了。但人为的一点点改文件名不现实，所以就要用到构建工具也就是webpage来帮忙解决这个问题，每一次打包它都自动的把名字改一下，从而把我们从这样的无意义的劳动中解放出来了，这也就是构建工具的作用。我们通过network来看，原有的文件名其实都变了，也就是印证了上面所说的构建工具的作用。
解决方法
ImgUrl:{backgroundImage:"url("+require("../assets/images/red.png")+")"}require是引入资源的意思，相当于从这个路径去引入一个资源文件 require能找到你打包以后改了名字的文件的位置，加载进来，而不是当你循环的时候再通过src属性去找这个目录对应的文件了。所以如果你是通过循环的方式来去引入你本地已经写死的图片的时候你就可以用require的方式去写。
但是如果是通过数据请求的方式拿到的线上的http或者https这样一个目录的图片的话就可以不用require了。