解决Vue打包后背景图片路径错误问题

【非原创】【非原创】【非原创】重要的事情说三遍

 

今天在插入背景图片过程中，遇到了路径错误的问题，通过网上查询，找到了解决的办法，但是大部分都没有讲造成这种问题的原因，故我简单地总结了一下，并加入了一些自己的理解，欢迎共同探讨~

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

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

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

绝对路径：从盘符开始的路径，如：C:windowssystem32cmd.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，在图中相应位置加入红框内容，其中值可能会有不同，若不同，自己配置成相应的即可。

转载自：CSDN     作者：liangxhblog

原文：https://blog.csdn.net/liangxhblog/article/details/78866066