Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可
修改 build/utils.js 中的 generateLoaders 方法,如下代码,增加 publicPath: '…/…/'
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
} // Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
Vue项目打包发布后CSS中的背景图片不显示的更多相关文章
- CSS中background:url(图片) 不能显示的问题
刚刚碰到一个奇怪的问题,这样一段CSS代码: .pho6 { background: url(img/pho6.jpg); } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...
- vue项目打包本地后通过nginx解决跨域
前言 有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题.我平时经常用的方法就是 ...
- vue项目build 之后,css文件加载图片或者字体文件时404的解决。
ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,di ...
- css 中的背景图片小技巧和存在的坑
body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
- 项目打包发布到tomcat中,中文出现乱码
先吐槽一下,花了我3个小时,心累 本地运行正常,发布时maven插件里要加utf-8编码 https://blog.csdn.net/testcs_dn/article/details/4558379 ...
- Vue项目打包发布,配置Nginx
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...
- css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录 这个不用多说,就是程序 ...
- CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中
body { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; background-colo ...
- CSS中让背景图片居中且不平铺
background:url(../images/logo.jpg) no-repeat center ;
随机推荐
- 树莓派项目(1-3 )目标识别 NNPACK支持版Darknet,可用于树莓派等嵌入设备
https://github.com/digitalbrain79/darknet-nnpack https://github.com/AlexeyAB/darknet#how-to-train-to ...
- Pandas | 14 统计函数
统计方法有助于理解和分析数据的行为.可以将这些统计函数应用到Pandas的对象上. pct_change()函数 系列,DatFrames和Panel都有pct_change()函数.此函数将每个元素 ...
- Django 1.11 shell中模块导入问题
django报错:django.core.exceptions.ImproperlyConfigured: 处理办法 import os os.environ['DJANGO_SETTINGS_MOD ...
- [RN] React Native 定义全局变量
React Native 定义全局变量 React Native全局变量的两种使用方式 一.导出和导入 // 定义的页面 global.js var global = {authorization: ...
- 【LG5444】[APIO2019]奇怪装置
[LG5444][APIO2019]奇怪装置 题面 洛谷 题目大意: 给定\(A,B\),对于\(\forall t\in \mathbb N\),有二元组\((x,y)=((t+\lfloor\fr ...
- ZROI 暑期高端峰会 A班 Day4 生成函数
一般生成函数 很普及组,不讲了 生成函数是一种形式幂级数,也就是我们只关心系数,不关心未知数具体的值. 比如 \(\sum\limits_{i\ge 0}x^i=\frac{1}{1-x}\).虽然只 ...
- AppDomin学习与分享
最近学习并分享了appdomin的一些东西,以前没怎么记录过,现在记录一下吧2016-03-17 什么是AppDomin •全称:Application Domin(应用程序域) •定义:AppDom ...
- kafka shell
停止 ./bin/kafka-server-stop.sh 启动 nohup sh kafka-server-start.sh ../config/server.properties & 创 ...
- 删除list集合中某些数据
去除list集合中不符合条件的数据 List<DictVo> applyStateList = SingletonHoldResource.getInstance().getList(Fr ...
- TCP、UDP和HTTP区别详解
http:是用于www浏览的一个协议.tcp:是机器之间建立连接用的到的一个协议. 1.TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层.在网络层有IP协议.ICMP协议.ARP协议.R ...