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 ;
随机推荐
- Java 字符流读写文件
据说,java读写文件要写很多,贼麻烦,不像c艹,几行代码就搞定.只能抄抄模板拿来用了. 输入输出流分字节流和字符流.先看看字符流的操作,字节转化为字符也可读写. 一.写入文件 1.FileWrite ...
- 【java异常】定时任务异常ERROR 20604 --- [ scheduling-1] o.s.s.s.TaskUtils$LoggingErrorHandler : Unexpected error occurred in scheduled task
2019-11-20 13:20:00.006 ERROR 20604 --- [ scheduling-1] o.s.s.s.TaskUtils$LoggingErrorHandler : Unex ...
- winform解决方案资源管理器
- learning shell check requires root privileges
[Purpose] Shell script check requires root privileges [Eevironment] Ubuntu 16.04 bas ...
- Visual Studio源服务器缓存
您是否想过Visual Studio 2008/2010在哪里存储从源服务器下载的源文件?默认情况下,它们会放在Local Settings\Applications Data\SourceServe ...
- TDD具体实施过程,可以看作两个层次
在代码层次,在编码之前写测试脚本,可以称为单元测试驱动开发(Unit Test Driven Development,UTDD) 在业务层次,在需求分析时就确定需求(如用户故事)的验收标准,即验收测试 ...
- eclipse Referenced file contains errors (http://www.springframework.org/schema/context/spring-context-3.0.xsd)
1.情景展示 spring配置文件报错信息如下: Referenced file contains errors (http://www.springframework.org/schema/ ...
- Flask项目之入门
from flask import Flask #实例化Flask对象 app = Flask(__name__) #传入当前的文件名__name__ #将‘/’ 和函数index的对应关系添加到路由 ...
- ArcGIS Server浏览地图服务无响应原因分析说明
1.问题描述 从4月17号下午5时起,至18号晚9点,客户单位部分通过ArcGIS Server发布的地图服务(该部分地图服务的数据源为数据库SJZX)无法加载浏览,表现为长时间无响应.同时,通过Ar ...
- hread.interrupt()到底意味着什么
首先,一个线程不应该由其他线程来强制中断或停止,而是应该由线程自己自行停止. 所以,Thread.stop, Thread.suspend, Thread.resume 都已经被废弃了.而 Threa ...