Vue项目开发之打包后背景图片路径错误的坑

　　在开发vue项目的过程当中,使用浏览器进行预览的时候全部图片的路径是没有任何问题的,可是在打包后传到服务器上,在微信端查看背景图片时,background的图片居然不显示,img标签里的图片倒是正常展现的,经过网上查询，找到了解决的办法，可是大部分都没有讲形成这种问题的缘由，故我简单地总结了一下，并加入了一些本身的理解，欢迎共同探讨~

        当用vue-cli自动构建项目后，有两种运行方法，分别是：

        npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，因此能够正常看到背景图片。

        npm run build : 打包项目，资源使用相对路径，因此会出现路径错误问题。

　　绝对路径：从盘符开始的路径，如：C:\windows\system32\cmd.exe

　　相对路径：从当前路径开始的路径

构建后的项目, 都须要读取静态资源，静态资源分为三种, JS, CSS, IMG，目录结构以下：

//结构目录

index.html

static

　　|--img

　　　　|--picname

　　|--css

　　　　|--app.css

　　|--js

　　　　|--app.js

　　此时经过img标签引入的图片显示正常，是由于img为html标签，他的路径是由index.html开始访问的，他走static/img/'图片名'是能正确访问到图片的

可是app.css访问static/img/'图片名'是访问错误的，由于在css目录下并无static目录。因此此时须要先回退两层到根节点处才能够正确获取到图片。

具体办法是：

打开build/utils.js，在图中相应位置加入红框内容，其中值可能会有不一样，若不一样，本身配置成相应的便可。