问题描述：

自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图：

当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比

图一：使用npm run dev命令访问

图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg，而实际在dist目录下，图片路径是这样的，如下图

解决办法：

解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。

publicPath:'../../'

添加位置为如下图：

然后重新执行 npm run build 命令，即可成功显示图片

需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

vue项目打包后css背景图路径不对的问题的更多相关文章

  1. vue webpack 打包后css背景图路径问题

    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...

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

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

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

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

  4. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

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

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

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

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

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

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

  8. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  9. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

随机推荐

  1. Protocol Buffers java

    Protocol Buffers https://developers.google.cn/protocol-buffers/ 一. 例 addressbook.proto. syntax = &qu ...

  2. 如何使用HttpClient来发送带客户端证书的请求，以及如何忽略掉对服务器端证书的校验

    最近要做客户端和服务器端的双向认证,在客户端向服务器端发送带证书的请求这里有一点问题,网上的例子大多都不太好使,于是找了github上httpclient源代码中的例子改造了一下,终于弄明白了 git ...

  3. 圆形CD绘制 (扇形)

    参考: Egret教程Arc是使用示例:http://edn.egret.com/cn/article/index/id/673 我封装的工具类: /** * 圆形进度 * @author chenk ...

  4. jenkins之-----------在必要的时候并发构建

    jenkins支持在同一节点支持同任务并发,但存在形成报告时会覆盖相应的文件,查看官网后发现有介绍“在必要的时候并发构建” 大致意思就是:将此项勾选后,可以同时执行,执行在任务自己的workspace ...

  5. Testlink定位实例

    最近在对testlink系统上做点东西,在定位部分元素时折腾了一段时间才搞定,特此记录 如下图 要定位红色框部分 一:先分析testlink页面结构,如下 如二个frame组成,一个是titlebar ...

  6. nginx动静分离小示例

    server { listen ; server_name www.xxx.cn; #静态页面 #匹配首页,url:www.xxx.cn index index.html; root /usr/loc ...

  7. Shell case

    case 值 in模式1) command1 command2 command3 ;;模式2) command1 command2 command3 ;;*) command1 command2 co ...

  8. MySQL行列转换拼接

    mysql> select TBL_ID,CREATE_TIME,LAST_ACCESS_TIME,TBL_NAME,TBL_TYPE from TBLS; +--------+-------- ...

  9. ImageGrab.grab()全屏抓取错误

    前几天看见知乎上的连连看外挂就想着自己试一下 但是搞了半天发现截取全屏的图片就出现了问题 截取的图片其实只有屏幕左上角的一部分 大概就这样: 用的是PIL  ImageGrab里的grab函数 没加参 ...

  10. Pyplot tutorial，Pyplot官方教程自翻译

      matplotlib.pyplot is a collection of command style functions that make matplotlib work like MATLAB ...