使用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. Django扩展Auth-User表的几种方法

    方式1, OneToOneField from django.contrib.auth.models import Userclass UserProfile(models.Model): user ...

  2. SDUT 1177 C语言实验——时间间隔

    C语言实验——时间间隔 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Discuss Problem Description 从键 ...

  3. Visual Studio 代码格式化插件(等号自动对齐、注释自动对齐等)

    1.下载地址 插件:Code alignment  下载地址 2.介绍 Based on principles borrowed from mathematics and other discipli ...

  4. 前端文件加载 net::ERR_CONTENT_LENGTH_MISMATCH

    前端文章加载的时候有的时候图片不显示,有的时候文件加载不了,检查nginx设置都没有问题,最近才不显示,经检查是nginx服务器磁盘空间已满,将.log文件移动到其他位置 cp  /dev/null ...

  5. charles 抓取app https 请求

    测试需要抓取app的https请求链接,百度了一下教程,能设置的都设置成功了,但就是抓取不成功,显示如下图 无奈之下还是用谷歌搜索了下(网速极慢),但是庆幸的找到了问题的答案,原因还是手机设置的问 打 ...

  6. 深入浅出git

    图文 http://www.cnblogs.com/syp172654682/p/7689328.html 廖雪峰 https://www.liaoxuefeng.com/wiki/001373951 ...

  7. 爬取腾讯课堂IT-互联网分类的的课程信息存入csv文件

    标签(空格分隔): python from urllib.request import urlopen from bs4 import BeautifulSoup #获取IT-互联网分类每页的课程的链 ...

  8. win7桌面上的ie图标删不掉怎么办

    一种准确的方法,不要只看着注册表的名字去删,万一删错一切就无法挽回了. 原文链接:http://zhidao.baidu.com/link?url=9H3xX7ScNSUd5NGxfir9napxOH ...

  9. Color Length UVA - 1625

    题目大意: 给你两个字符串p,q,字符串中每个字符代表一个颜色,现在按顺序合并两个字符串,得到一个新字符串.新字符串的价值为,每个颜色价值的和,单个颜色价值的和等于该颜色在新字符中最后一次出现的位置减 ...

  10. swift3.0 原生网络请求

    func loadData()  { let urlString = baseURL + NewsListURL + "\(self.page)"+"/20" ...