使用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. 存储前set方法相互关联 只关联了一方 分别set

    17:51:45,580 ERROR SqlExceptionHelper:129 - Column 'lkm_cust_id' cannot be nullorg.hibernate.excepti ...

  2. DR客户端一直连接服务器....(6)

    DR客户端一直连接服务器....(非未选择网卡)解决方法: 控制面板-->网络和 Internet-->网络连接,打开本地连接(以太网)属性,将IPV4协议前面的对勾去掉,重启DR 这样D ...

  3. 算法Sedgewick第四版-第1章基础-020一按优先级计算表达式的值

    /****************************************************************************** * Compilation: javac ...

  4. Java进程与多线程+线程中的join、yield、wait等方法+synchronized同步锁使用

    首先了解什么是多线程与进程 进程:是一个执行过程,动态的概念 --->会分配内存线程:是进程的一个单元,线程是系统最小的执行单元 详解: http://blog.csdn.net/luoweif ...

  5. Android 菜单 之 上下文菜单ContextMenu

    所谓上下文菜单就是当我们长按某一个文件时弹出的菜单 操作这个菜单我们要重写onCreateContextMenu()方法 如上一篇文章一样,对于这个菜单中选型的操作也有动态添加和xml文件添加两种方法 ...

  6. 移动应用中的AR开发,5款最受欢迎工具推荐!

      英文原文:Top 5 Tools for Augmented Reality in Mobile Apps 还记得前段时间在网上很火的 3D 小熊不?托它的福,为相当一部分人科普了增强现实(AR) ...

  7. URLTester2.3.2

    文件: URLTester2.3.2.zip 大小: 1170KB 下载: 下载 URLTester是一个URL测试工具,最主要的一个特色是:当一个域名对应多个IP地址时,不用修改hosts文件,即可 ...

  8. 用C#截取指定长度的中英文混合字符串

    很早以前写过一篇文章(用C#截取指定长度的中英文混合字符串),但是对性能没有测试,有人说我写的这个方法性能有问题,后来想,可能真会有BT之需求要求传入一个几万K甚至几M体积的字符串进来,那将会影响正则 ...

  9. 小小c#算法题 - 9 - 基数排序 (Radix Sort)

    基数排序和前几篇博客中写到的排序方法完全不同.前面几种排序方法主要是通过关键字间的比较和移动记录这两种操作来实现排序的,而实现基数排序不需要进行记录项间的比较.而是把关键字按一定规则分布在不同的区域, ...

  10. iOS应用推荐

    RSS阅读器 Inoreader ***客户端 SuperWingy OpenWingy(已下架) 书签 Pocket 语音备忘录 Voice-Memos 编程语言学习 SoloLearn 社交 Tw ...