使用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. php学习笔记-超级全局变量

    超级全局变量,超级在哪里呢?相对于global类型的变量,超级全局变量的作用域是没有限制的,函数外.函数内.随便一个PHP文件都可以引用超级全局变量.在PHP中有很多超级全局变量, 常用的有_SERV ...

  2. 前端学习笔记2017.6.12 CSS控制DIV

    前一篇文章中用div布局了豆瓣东西的页面,如果用html代码表示的话大概是这个样子的 <!DOCTYPE html><html><head></head> ...

  3. CF 1027E Inverse Coloring

    当天晚上并没有看懂题意,然后就刚了40分钟F,但是没有弄出来呜呜呜. 推荐博客:  https://blog.csdn.net/Dream_maker_yk/article/details/81840 ...

  4. 1.Basic Layouts

    使用过mfc编程,就知道控件需要自己拖放.当一个界面有很多小控件时,摆放这些控件特别麻烦. 但是qt编程中有布局(Layout),让系统来摆放控件.使整个控件有一致的外观和感觉,特别方便. 1.水平方 ...

  5. dfs和bfs算法

    1. 存储图的方式一般是有两种的:邻接表和邻接矩阵,一般存储链接矩阵的方式是比较简单的,也便于我们去实现这个临接矩阵,他也就是通俗的二维数组,我们平常用到的那种. 2. 这里我们主要记录和讲一下bfs ...

  6. JMeter上传文件 点选form-data依旧失败的解决方法

    转子:https://blog.csdn.net/xingyunpi/article/details/77930476 这几天一直在调用JMeter上传文件的一个接口,一直出错,在网上找到一些文章说的 ...

  7. python 常用的一些库

    AllPairs 2.0.1Appium-Python-Client 0.24asn1crypto 0.24.0attrs 17.4.0AutoItLibrary 1.1bcrypt 3.1.4bea ...

  8. java反射机制的粗略理解

    java反射机制: 涉及的对象:Class, Object, 函数:Class类:[forName(String className):static:getClass():public],Object ...

  9. Android消息传递之EventBus 3.0

    Android消息传递之EventBus 3.0使用详解 http://www.cnblogs.com/whoislcj/p/5595714.html EventBus 3.0进阶:源码及其设计模式 ...

  10. HeadFirst设计模式中的笔记

    1.『策略模式』 定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. OO基础:抽象 封装 多态 继承 OO原则:封装变化 多用组合,小用继承   针对接口编 ...