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

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

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

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

我项目中静态图片都是放在和src同级的static目录中，写的都是相对路径

开发过程中npm run dev读取图片是没问题的，可是打包后读取图片报错路径错误，找了些资料阅读，得到的结论是：

app.css访问static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。所以此时需要先回退两层到根节点处才可以正确获取到图片。

解决办法是打开build/utils.js，在图中相应位置加入publicPath使其回退到根目录：

重新打包测试，OK没问题了，希望本文对你有所帮助！

vue项目打包后图片路径问题的更多相关文章

  1. vue项目打包后运行报错400如何解决

    昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...

  2. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. vue项目打包后想发布在apache www/vue 目录下

    使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...

  5. vue项目build打包后图片路径不对导致图片空白不显示问题解决方法

    1.在上篇文章src配置及引入的基础上修改项目配置: 文章链接地址:https://www.cnblogs.com/hsl-shiliang/p/10333022.html. 2.具体配置过程如图: ...

  6. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

  7. vue项目打包后路径出错

    安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...

  8. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  9. vue项目打包后一片空白及资源引入的路径报错解决办法

    网上很多说自己的VUE项目通过Webpack打包生成的list文件,放到HBulider打包后,通过手机打开一片空白.这个主要原因是路径的问题. 1.记得改一下config下面的index.js中bu ...

随机推荐

  1. Angular.js实现分页

    一.编写angularJS实现的分页js(网上搜)和样式表(pagination),并在页面引入 二.编写变量和方法 //分页控件控制 $scope.paginationConf={ currentP ...

  2. PHP企业微信授权

    1.添加应用菜单. 2.access_token /** * 获取token * @return [type] [description] */ public function getToken() ...

  3. js window.open隐藏参数提交

    1.采用form方式提交 var url = "page/public/exportExcel.jsp"; //create a form var tempForm = docum ...

  4. python-玉米（小米）商城作业

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Java工具类DateFormatUtils详解

    日期和时间格式化实用程序和常量public static String format(Calendar calendar, String pattern) 说明:将日历格式化为特定的模式:参数:cal ...

  6. jquery查找筛选器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. delphi异常捕获try except语句 和 try finally语句用法

    原文地址:delphi try except语句 和 try finally语句用法以及区别作者:1865898133 一直写程序都没管他们,也尽量很少用,今天终于想把他给弄个明白,在网上找来,记下! ...

  8. Lazarus 0.9.26——UTF8编码副作用

    Lazarus 0.9.26中,涉及范围最广的的改变就是所有的的String默认都采用UTF8编码,IDE终于有了完全的UTF8支持,以前在源码编辑器中“吃掉”半个汉字的情况不再出现.对于Linux下 ...

  9. JSFL 禁止脚本运行时间太长的警告

    fl.showIdleMessage(false);

  10. UE 不生成.bak文件

    .bak文件是UE处理文件时自动备份的文件,可以取消备份这样就不会生成.bak文件了 菜单:高级-设置-文件处理-备份        应用和确定