相信有很多同学在学习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. 性能测试:TPS和QPS的区别

    做测试,各种ps,jps,tps,qps,rps,hps,你理解几个? 技术群里,问得最多的就是tps和qps,有相似的地方,也有差异的地方,我简单谈下自己的理解.(由于比较忙,下面部分摘抄自网络) ...

  2. Hbase与hive集成与对比

    HBase与Hive的对比 1.Hive (1) 数据仓库 Hive的本质其实就相当于将HDFS中已经存储的文件在Mysql中做了一个双射关系,以方便使用HQL去管理查询. (2) 用于数据分析.清洗 ...

  3. eclipse IDE for java developers下载与安装

    1.进入eclipse官网下载页面 https://www.eclipse.org/downloads/ 2.点击Download Packages 3.windows 用户 选择 64 bits 4 ...

  4. pycharm运行过程中pycharm控制台和python控制台之间的切换

    有时候在调试(debug)python代码的时候,希望像matlab那样输入某一个变量以查看其值,这是需要把pycharm的console切换到python的console,以输入变量查看其值,点击那 ...

  5. 树莓派搭建基于flask的web服务器-通过移动端控制LED

    1.概述 在局域网内,基于flask搭建web服务,从而可以使用移动客户端访问该web服务.由于是flask新手,所以本次实现的web服务功能较为简单,即控制LED灯的开/关及闪烁. 2.准备工作 2 ...

  6. js中a + 1 < a等于true,(a ==1 && a== 2 && a==3) 等于 true如何实现

    先说a + 1 < a const a = { i: 1, valueOf: () => { if (a.i === 1) { return a.i++; } return a.i+2; ...

  7. AI保存文件出现了未知错误 (Adobe Illustrator)

    可能的原因如下:1 把文件中所有的文字全选,转成曲线,把所有的文字都创建成轮廓2 新建一个页面,把制作的复制到新页面里3 需要把图层全部解锁再保存4 没有权限,设置一下即可5 PRINT SPOOLE ...

  8. [C++基础] 数组、指针、内存篇

    一.数组 2.1 int a[2][2]= { {1}, {2,3} },则 a[0][1] 的值是多少? 二维数组的初始化一般有两种方式: 第一种方式是按行来执行,如int array\[2][3] ...

  9. 《Linux就该这么学》培训笔记_ch18_使用MariaDB数据库管理系统

    <Linux就该这么学>培训笔记_ch18_使用MariaDB数据库管理系统 文章最后会post上书本的笔记照片. 文章主要内容: 初始化MariaDB服务 管理用户以及授权 创建数据库与 ...

  10. cad.net 图层隐藏 IsHidden 用法 eDuplicateRecordName 报错

    提要:影响图层显示的主要有:关闭        isOff冻结        IsFrozen 图层隐藏 isHidden视口冻结 FreezeLayersInViewport 今天小博发现了一件事情 ...