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 ;
随机推荐
- apt-get update失败处理:*** Error in `appstreamcli': double free or corruption (fasttop): 0x00000000015c4bf0 ***
好像只要卸载一个东西就可以了(至少我的是这样): sudo apt-get purge libappstream3 再重新执行update命令, sudo apt-get update 参考链接: 1 ...
- 【oracle】update 某字段为null
字段 = null 注意这个字段要可以为空
- gnome 3 插件设置
插件安装及管理方法 应该需提前在gnome-tweaks中打开user-theme,重启电脑后才可找到Add-ons Debian9 下在应用商店插件add-ons里进行选择安装,在应用商店已安装应用 ...
- selenium篇之滑动验证码
一.介绍 现在出现了一种通过用户鼠标移动滑块来填补有缺口图片的验证码,我们叫做滑动验证码.它的原理很简单,首先生成一张图片,然后随机挖去一块,在页面展示被挖去部分的图片,再通过js获取用户滑动距离,以 ...
- 常见的概率分布类型(二)(Probability Distribution II)
以下是几种常见的离散型概率分布和连续型概率分布类型: 伯努利分布(Bernoulli Distribution):常称为0-1分布,即它的随机变量只取值0或者1. 伯努利试验是单次随机试验,只有&qu ...
- Oracle_12541错误和ora-12514错误
ORA-12541: TNS无监听程序错误 在oracle安装目录(E:\app\Administrator\product\instantclient_12_1\NETWORK\ADMIN)下查找l ...
- 2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础
2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础 原理与实践说明 实践内容概述 基础问题回答 实践过程记录 1.Web前端:HTML 2.Web前端:javascipt ...
- 【Gamma阶段】第九次Scrum Meeting
冰多多团队-Gamma阶段第九次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 卓培锦 美化前端及编辑器界面,编辑器风格切换(添加夜间模式) UI界面手势切换 牛雅哲 添加scp工具,添加 ...
- awk简单应用
偷懒之人,必定会想方设法的走捷径.如果你想结束多个ID进程,有的人可能会说pkill 和killall.但是有时候不知道为啥 不生效啊 = =! 知道的可以告诉我.刚好最近在学awk 下面命令调用系统 ...
- pom.xml文件引入tools.jar
最近做hbase开发时,引入相关jar包后,出现了以下错误 Missing artifact jdk.tools:jdk.tools:jar:1.8 绝对地址引用 <dependency> ...