项目中图片都放在src/img文件夹，img和background-image引用都用相对路径，即../../这种形式

在打包build的设置路径assetsPublicPath: ‘./‘，然后那些没有转成base64的背景图都失效了，，路径。

处理方法：

　　使用require引入图片

img标签

<img :src="require('assets/img/header/search.png')">

背景图

<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div>

　　

vue项目中打包background背景路径问题的更多相关文章

  1. vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  2. Vue项目中v-bind动态绑定src路径不成功

    问题: 在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示, 但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片 ...

  3. vue项目webpack打包后图片路径错误

    首先项目是vue-cli搭建的,项目结构如下: 然后发现在css里写的图片引用地址在开发时正常显示,但在打包扔上服务器之后报错 报的是404,路径前面多了/static/css,不知道为啥. 在自己慢 ...

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

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

  5. Vue项目的打包

    vue项目的打包 更改config文件夹下的index.js里的assetsPublicPath路径    将 “/”  改为  “./” build: { env: require('./prod. ...

  6. vue项目如何打包扔向服务器

    vue项目如何打包扔向服务器   当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放 ...

  7. Vue项目如何打包问题总结

    当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中.我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上. 先来描述一 ...

  8. 如何在Vue项目中，通过点击DOM自动定位VScode中的代码行？

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

  9. vue项目 构建 打包 发布 三部曲

    一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博 ...

随机推荐

  1. Python locals() 的陷阱

    转载自https://segmentfault.com/a/1190000012724861 在工作中, 有时候会遇到一种情况: 动态地进行变量赋值, 不管是局部变量还是全局变量, 在我们绞尽脑汁的时 ...

  2. Git-Runoob：Git 分支管理

    ylbtech-Git-Runoob:Git 分支管理 1.返回顶部 1. Git 分支管理 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同 ...

  3. Delphi XE2 之 FireMonkey 入门(33) - 控件基础: TFmxObject: SaveToStream、LoadFromStream、SaveToBinStream、LoadFromBinStream

    Delphi XE2 之 FireMonkey 入门(33) - 控件基础: TFmxObject: SaveToStream.LoadFromStream.SaveToBinStream.LoadF ...

  4. Asp .Net Mvc在DeBug模式下设置自定义IP

    首先打开所在项目下的.vs文件(查看隐藏文件) 打开config下的applicationhost.config文件 往下拖大概100多行的位置,复制一下binding,然后设置本地ip,如果是设置i ...

  5. c#字符串代码，动态创建编译器

    https://www.cnblogs.com/mrma/p/3998679.html 试了,确实可行,在unity也能用 值得注意的是UnityScript.Scripting.Evaluator ...

  6. 2019JAVA第二次实验报告

    Java实验报告 班级 计算机科学与技术二班 学号 20188442 姓名 吴怡君 完成时间 2019/9/19 评分等级 实验二 Java简单类与对象 实验目的 掌握类的定义,熟悉属性.构造函数.方 ...

  7. composer安装thinkphp5

    之前安装过composer,里面的一些命令符可以看看,安装tp5我也是按照文档来的,也没什么难度.但是也出现一些问题: 安装tp5: 安装在本地php环境的www目录下,通过命令窗口切换到www目录下 ...

  8. json.dumps、json.dump、json.loads、json.load的区别

    json 模块提供了一种很简单的方式来编码和解码JSON数据. 其中两个主要的函数是 json.dumps() 和 json.loads() 下面是如何将Python数据结构转换为json impor ...

  9. http协议是无状态协议，它的无状态指的是什么，如何解决这种情况

    http是无状态的协议,也是不安全的协议, 它的无状态是指对于事务处理没有记忆能力,缺少状态意味着后续的操作需要前面的信息. 解决办法:1,通过cookie解决,2,通过session会话保存.

  10. linux中文件权限格式与chmod命令以及用户和用户组的管理

    简单了解一下linux中的文件权限格式与chmod命令 chmod命令:改变文件或者目录的权限 格式:chmod [参数] [<权限范围><符号><权限代码>] - ...