相信有很多同学在学习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中的背景图片不显示的更多相关文章

  1. CSS中background:url(图片) 不能显示的问题

    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  2. vue项目打包本地后通过nginx解决跨域

    前言 有时候我们打包好vue项目让后端人员部署项目时可能会有小插曲,为了不麻烦后端人员和避免尴尬,最好的办法就是在本地自己先测一下,而在本地运行打包后的项目会遇到接口跨域的问题.我平时经常用的方法就是 ...

  3. vue项目build 之后,css文件加载图片或者字体文件时404的解决。

    ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,di ...

  4. css 中的背景图片小技巧和存在的坑

    body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...

  5. 项目打包发布到tomcat中,中文出现乱码

    先吐槽一下,花了我3个小时,心累 本地运行正常,发布时maven插件里要加utf-8编码 https://blog.csdn.net/testcs_dn/article/details/4558379 ...

  6. Vue项目打包发布,配置Nginx

    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  7. css中background-image背景图片路径设置

    web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: /  项目根目录         这个不用多说,就是程序 ...

  8. CSS样式中,background-image 背景图片居中显示并且在不同屏幕分辨率下始终居中

    body {   margin-top:0px; margin-right:0px;   margin-bottom:0px;   margin-left:0px;   background-colo ...

  9. CSS中让背景图片居中且不平铺

    background:url(../images/logo.jpg) no-repeat center ;

随机推荐

  1. apt-get update失败处理:*** Error in `appstreamcli': double free or corruption (fasttop): 0x00000000015c4bf0 ***

    好像只要卸载一个东西就可以了(至少我的是这样): sudo apt-get purge libappstream3 再重新执行update命令, sudo apt-get update 参考链接: 1 ...

  2. 【oracle】update 某字段为null

    字段 = null 注意这个字段要可以为空

  3. gnome 3 插件设置

    插件安装及管理方法 应该需提前在gnome-tweaks中打开user-theme,重启电脑后才可找到Add-ons Debian9 下在应用商店插件add-ons里进行选择安装,在应用商店已安装应用 ...

  4. selenium篇之滑动验证码

    一.介绍 现在出现了一种通过用户鼠标移动滑块来填补有缺口图片的验证码,我们叫做滑动验证码.它的原理很简单,首先生成一张图片,然后随机挖去一块,在页面展示被挖去部分的图片,再通过js获取用户滑动距离,以 ...

  5. 常见的概率分布类型(二)(Probability Distribution II)

    以下是几种常见的离散型概率分布和连续型概率分布类型: 伯努利分布(Bernoulli Distribution):常称为0-1分布,即它的随机变量只取值0或者1. 伯努利试验是单次随机试验,只有&qu ...

  6. Oracle_12541错误和ora-12514错误

    ORA-12541: TNS无监听程序错误 在oracle安装目录(E:\app\Administrator\product\instantclient_12_1\NETWORK\ADMIN)下查找l ...

  7. 2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础

    2018-2019-2 网络对抗技术 20165318 Exp 8 Web基础 原理与实践说明 实践内容概述 基础问题回答 实践过程记录 1.Web前端:HTML 2.Web前端:javascipt ...

  8. 【Gamma阶段】第九次Scrum Meeting

    冰多多团队-Gamma阶段第九次Scrum会议 工作情况 团队成员 已完成任务 待完成任务 卓培锦 美化前端及编辑器界面,编辑器风格切换(添加夜间模式) UI界面手势切换 牛雅哲 添加scp工具,添加 ...

  9. awk简单应用

    偷懒之人,必定会想方设法的走捷径.如果你想结束多个ID进程,有的人可能会说pkill 和killall.但是有时候不知道为啥 不生效啊 = =! 知道的可以告诉我.刚好最近在学awk 下面命令调用系统 ...

  10. pom.xml文件引入tools.jar

    最近做hbase开发时,引入相关jar包后,出现了以下错误 Missing artifact jdk.tools:jdk.tools:jar:1.8 绝对地址引用 <dependency> ...