当用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. linux 如何统计某目录下所有文件个数

    该目录以及该目录的子目录下普通文件个数: ls -lR |grep '^-' |wc -l ls -l 查询该目录下的所有文件 R 包含子目录,其实就是递归查看 grep '^-' 表示过滤掉(以&q ...

  2. SpringMVC源码学习之request处理流程

    目的:为看源码提供调用地图,最长调用逻辑深度为8层,反正我是springMVC源码学习地址看了两周才理出来的. 建议看完后还比较晕的,参照这个简单的模型深入底层,仿SpringMVC自己写框架,再来理 ...

  3. Mapperreduce的wordCount原理

    wordcount原理: 1.mapper(Object key,Object value ,Context contex)阶段 2.从数据源读取一行数据传递给mapper函数的value 3.处理数 ...

  4. PHP单点登陆

    本文主要介绍了利用webservice,session,cookie技术,来进行通用的单点登录系统的分析与设计.具体实现语言为PHP.单点 登录,英文名为Single Sign On,简称为 SSO, ...

  5. SecureCRT显示乱码的解决办法

    下面来看看SecureCRT的显示出现乱码这种情况.比如: 现在我们重新设置一下 设置下图中的配置 1.选择字符编码为UTF-8. 2.设置字符集为GB2312后保存好后确认退出. 3.再次测试一下.

  6. SPring cloud （3）A Ribbon 负载均衡 配置初步

    1.引用pom <dependency> <groupId>org.springframework.cloud</groupId> <artifactId&g ...

  7. 用U盘制作启动盘后空间变小的恢复方法

    先把u盘插好, 运行cmd(按住键盘左下角第二个windows键的同时按R), 输入diskpart,回车, (此时可以再输入list disk,回车,能看到这台电脑的所有磁盘大致情况,u盘一般是磁盘 ...

  8. 机器学习进阶-阈值与平滑-图像平滑操作(去噪操作) 1. cv2.blur(均值滤波) 2.cv2.boxfilter(方框滤波) 3. cv2.Guassiannblur(进行高斯滤波) 4. cv2.medianBlur(进行中值滤波)

    1.cv2.blur(img, (3, 3))  进行均值滤波 参数说明:img表示输入的图片, (3, 3) 表示进行均值滤波的方框大小 2. cv2.boxfilter(img, -1, (3, ...

  9. python 阿狸的进阶之路(5)

    一.模块 1.什么是模块: 包含了一组功能的python文件,文件名是xxx.py,模块名是module. 可以使用 import module,四个通用的类别: (1)用python编写的py文件 ...

  10. English-新概念学习

    English-英语字母发音全攻略.pdf English-新概念第一册笔记.rar English-新概念第二册笔记.rar English-新概念第三册笔记.rar English-英语训练用书. ...