使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图:

  

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

  

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

publicPath:'../../'

  如下图:

    

这样就解决这个问题。

vue-cli构建的vue项目打包后css引入的背景图路径不对的问题的更多相关文章

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

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

  2. vue cli 构建的 webpack 项目设置多页面

    1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...

  3. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  4. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

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

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

  6. vue+elementui项目打包后样式变化问题

    博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎,找到了问题所在以及解决办法:main.js中的引入顺序决定 ...

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

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

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

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

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

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

随机推荐

  1. Apache Thrift with Java Quickstart(thrift入门及Java实例)

    thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, Perl ...

  2. p4213 【模板】杜教筛(Sum)

    传送门 分析 我们知道 $\varphi * 1 = id$ $\mu * 1 = e$ 杜教筛即可 代码 #include<iostream> #include<cstdio> ...

  3. ARC073D Simple Knapsack

    传送门 题目大意 给你n个物品,你有一个容量为W的背包,每一个物品都有它的重量和价值,让你从n个中选取若干个,使得总重量不超过背包的上限,而且使得价值最大. 分析 首先我们不难发现由于W很大,所以这并 ...

  4. Luogu 3168 [CQOI2015]任务查询系统

    区间修改单点查询,又观察到是一个k小,考虑主席树上做差分 一开始样例疯狂挂,后来发现主席树在一个历史版本上只能修改一次,所以要开2*n个根结点,记录一下每个时间对应的根结点编号 然后80分,考虑到当一 ...

  5. Servlet处理表单数据

    Servlet 表单数据 很多情况下,需要传递一些信息,从浏览器到 Web 服务器,最终到后台程序.浏览器使用两种方法可将这些信息传递到 Web 服务器,分别为 GET 方法和 POST 方法. 使用 ...

  6. 简单的使用rabbitmq的例子

    1.创建了两个项目 : (1).spring_cloud_rabbitmq_send 消息发送者 (2).spring_cloud_rabbitmq_receive  消息接受者 2. 添加rabbi ...

  7. JavaAppArguments示例

    本实验要求编写一个程序,此程序从命令行接收多个数字,求和之后输出结果.一大难点是命令行参数都是字符串,必须先将其转化为数字,才能相加. 中心想法就是将求和数字转换为整型并依次相加. 程序流程图: pu ...

  8. ubuntu - 官方简体中文wiki,有你想要的ubuntu的一切

    ubuntu官方简体中文wiki:http://wiki.ubuntu.org.cn/%E9%A6%96%E9%A1%B5

  9. ubuntu - 14.04,配置GOPATH(GO语言开发代码存放目录)

    一,创建GOPATH:选择一个目录或者在我们想要的地方创建一个作为GOPATH的目录,我的GOPATH是:“/home/sunylat/gopath”. 二,配置系统变量:在shell里面输入“sud ...

  10. ABAP开发常见任务

    在ABAP开发中 最主要的工作: 1 报表的开发 主要使用到数据库读取 ALV LIST等技术: 2 单据的打印 主要使用到数据库读取.SmartFirms.Form等技术: 3 数据的上载 主要使用 ...