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 ...
随机推荐
- php学习笔记-默认参数
在定义函数的时候,我们可以把其中的一个参数变的特殊起来,使它有一个默认值,这个参数就叫默认参数.在调用这个函数的时候,你既可以给这个默认参数传递一个值,这样的话默认参数的值会被覆盖掉,也可以不给它传递 ...
- HBase 协处理器统计行数
环境:cdh5.1.0 启用协处理器方法1. 启用协处理器 Aggregation(Enable Coprocessor Aggregation) 我们有两个方法:1.启动全局aggregation, ...
- c++ 拷贝构造函数 继承
拷贝构造函数要求把所有变量都需要做拷贝.在有继承关系情况先,子类的拷贝构造函数,需要调用父类拷贝构造函数.示例代码如下: class Base{ public: virtual ~Base(); Ba ...
- 形式化验证工具（PAT）2PC协议学习
今天我们来看看2PC协议,不知道大家对2PC协议是不是了解,我们先简单介绍一下. 两阶段提交协议(two phase commit protocol, 2PC)可以保证数据的强一致性,许多分布式关系型 ...
- Java接口基础
接口(interface) 1.接口体中包含常量的声明(没有变量)和抽象方法两部分.接口体中只有抽象方法,没有普通的方法,而且接口体中所有的常量访问权限一定是public,而且是static常量(允许 ...
- Java的post请求-----接口测试
本次主要是对登陆的接口测试post请求,希望记录在博客里面,一点一点的成长. package com.ju.Login; import java.io.BufferedReader; import j ...
- yzm10的职业生涯
yzm10的进阶之路,记录一点一滴的进步,希望与之共勉. 时间 比赛 战绩 2015.11 NOIP2015全国青少年信息学奥林匹克联赛 提高组二等奖 2017.6 青岛大学“六一八杯”校赛个人赛 冠 ...
- 2013年第四届蓝桥杯省赛试题（JavaA组）
1.结果填空 (满分3分)2.结果填空 (满分5分)3.结果填空 (满分6分)4.结果填空 (满分13分)5.代码填空 (满分5分)6.代码填空 (满分10分)7.程序设计(满分4分)8.程序设计(满 ...
- Win10下Tensorflow+GPU的环境配置
不得不说,想要为深度学习提前打好框架确实需要花费一番功夫.本文主要记录了Win10下,Cuda9.0.Cudnn7.3.1.Tensorflow-gpu1.13.1.python3.6.8.Keras ...
- 与HDFS交互-By shell命令
Shell命令的开头有三种: hadoop fs hadoop dfs hdfs dfs 关于具体命令之前写过 可查看:https://www.cnblogs.com/floakss/p/970344 ...