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

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

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

这样就解决这个问题。
vue-cli构建的vue项目打包后css引入的背景图路径不对的问题的更多相关文章
- vue项目打包后css背景图路径不对的问题
问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...
- vue cli 构建的 webpack 项目设置多页面
1. webpack-dev-server下的设置(npm run dev) ./build/webpack.dev.conf.js 中,修改 new HtmlWebpackPlugin ,一个页面一 ...
- vue+webpack项目打包后背景图片加载不出来问题解决
在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...
- Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)
最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...
- vue项目打包后想发布在apache www/vue 目录下
使用的是vue-element-admin做示例,可以参考Vue项目根据不同运行环境打包项目,其他项目应该大同小异. 使用vue-router的browserHistory模式,配置mode: 'hi ...
- vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎,找到了问题所在以及解决办法:main.js中的引入顺序决定 ...
- vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
- vue项目打包后运行报错400如何解决
昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with ...
- vue build打包后css里的图片路径404不正确的问题
vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...
随机推荐
- Linux kgdb命令
一.简介 kgdb是一种源码级的Linux内核调试器.使用kgdb调试内核时,需要结合gdb一起使用,使用他们可以对内核进行单步调试,设置断点,观察变量.寄存器的值等与应用调试相关的功能.然而也有其限 ...
- MSSQL数据库设计心得
统一库名命名规则. 格式:公司简称_库名 如:Supesoft_Member 会员库 建库时,最好将初始大小设置为你认为可允许的最大容量.避免因为库太小,而出现系统自增加.在系统运行中,自动增加空间 ...
- xcodebuild命令
一.xcodebuild命令介绍 1.基本命令 查看xcodebuild简洁用法 xcodebuild -usage 查看已安装的SDK xcodebuild -showsdks 查看安装的版本号 x ...
- easyui 展开缩起
1.引用jquery-easyui-1.4.4/datagrid-detailview 2.增加属性 view: detailview, detailFormatter: function (rowI ...
- 搭建邮件服务器 Postfix + Dovecot (CentOS)
最近分配到一台ECS服务器,需要搭建一台邮件服务器. 查了一波资料选择了Postfix (smtp)和 Dovecot(pop3). 推荐教程:http://www.cnblogs.com/zlbei ...
- C# Winform欢迎窗体实现()
方法一.program.cs 中先启动欢迎窗体,然后注册程序运行空闲去执行主程序窗体相应初始化代码 static void Main(string[] args) { Application.Enab ...
- SQLServer存储引擎——03.日志
3. SQLServer存储引擎之日志篇 (3.1)日志结构 (3.1.1)物理日志 (0)物理日志即数据库的.ldf文件, 当然后缀名是可以自定义的,默认是.ldf (1)一个SqlServer数据 ...
- Java编程思想读书笔记之一切皆对象
一切皆对象 Java程序运行时,数据保存到哪里 寄存器 这是最快的保存区域,因为它位于和其他所有保存方式不同的地方:处理器内部.然而,寄存器的数量十分有限,所以寄存器是根据需要由编译器分配.我们对此没 ...
- Binder学习笔记(六)—— binder服务端是如何组织addService数据的
在checkService的调查中我们知道客户端向ServiceManager请求服务名,ServiceManager根据服务名遍历本地链表,找到匹配的handle返回给客户端.这个handle显然是 ...
- Kafka 练习题
一.选择题 Kafka服务器默认能接收的最大消息是多大? (单选) A A:1M B:10M C:100M D:没有大小限制,因为支持大数据 2.Kafka的特性(多选) ABCD A:高吞吐量.低 ...