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 ;
随机推荐
- VSS 使用方法
VSS 的全称为 Visual Source Safe .作为 Microsoft Visual Studio 的一名成员,它主要任务就是负责项目文件的管理,几乎可以适用任何软件项目.管理软件开发中各 ...
- zzulioj - 2599: 对称的数字
题目链接: http://acm.zzuli.edu.cn/problem.php?id=2599 题目描述 小D同学发现了一些数字与其反转数字相加求和得出新数字,新数字再不断重复这个过程,最终可能得 ...
- Python面向对象 | isinstance和issubclass
isinstance(a,b):判断a是否是b类(或者b类的基类)实例化的对象 class A: pass class B(A): pass obj = B() print(isinstance(ob ...
- ABP 报错 System.InvalidOperationException: 实例失败。
错误:System.InvalidOperationException: 实例失败. 解决:数据库链接写错了,斜杠的问题 core:两根斜杠 .net framework:一根斜杠 core的写法: ...
- 深度学习之ResNet网络
介绍 Resnet分类网络是当前应用最为广泛的CNN特征提取网络. 我们的一般印象当中,深度学习愈是深(复杂,参数多)愈是有着更强的表达能力.凭着这一基本准则CNN分类网络自Alexnet的7层发展到 ...
- dockerfile 的问题 FROM alpine:3.8 temporary error (try again later)
FROM alpine:3.8 apk add xxx安装软件 fetch http://dl-cdn.alpinelinux.org/alpine/v3.8/main/x86_64/APKINDEX ...
- pycharm安装pytorch失败的问题
在无GPU的情况下,打算安装pytorch跑几个demo练练手,但是pycharm发现总是失败,无法安装成功.错误显示如下: 无奈之下,只能够使用官方推荐的命令pip3安装,命令如下: pip3 in ...
- cad.net GeometricExtents出错了 调试看不到文字
飞诗: 难道块不能取GeometricExtents GeometryExtentsBestFit 用这个解决 GeometryExtentsBestFit 对动态块也不准 com方式 ...
- docker 学习操作记录 5-2
记录5-2 root@53d0a643a2c7:/# quit bash: quit: command not found root@53d0a643a2c7:/# exit exit -->@ ...
- Linux内核中的IS_ERR()实现
1.前言 对于任何一个指针来说,必然有三种情况:一种是有效指针,一种是NULL,也就是空指针,一种是错误指针,也就是无效指针,在Linux内核中,所谓的错误指针就是指其已经到达了内核空间的最后一个pa ...