相信有很多同学在学习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. volatile 关键字 和 i++ 原子性

    package com.mozq.multithread; /** * 深入理解Java虚拟机 volatile 关键字 和 i++ 原子性. */ public class VolatileTest ...

  2. pointnet++论文的翻译

    参考: https://blog.csdn.net/weixin_40664094/article/details/83902950 https://blog.csdn.net/pikachu_777 ...

  3. 【java】oracle好用,但java运行缺失右括号

    可能原因SQL拼接有空格被省略导致sql粘连. 解决办法,扩大拼接或者缩小拼接范围.

  4. mybatis学习4

    QL99中的连接查询 连接查询 交叉连接    select * from A,B; 内连接 隐式内连接   select * from A,B where 条件 显示内连接  select * fr ...

  5. freeradius编译安装+mysql配置

    参考文档: freeradius 官网的wikihttp://wiki.freeradius.org/Home ubuntu freeradius搭建教程 http://yustanto.com/fr ...

  6. java 监控文件夹 WatchService

    原文链接 :http://blog.csdn.net/lirx_tech/article/details/51425364 public class WacthFileUtil { public st ...

  7. Random Access Iterator 徐州网络赛(树形dp)

    Random Access Iterator \[ Time Limit: 4000 ms \quad Memory Limit: 262144 kB \] 题意 给出伪代码,问按着伪代码在树上跑,能 ...

  8. plv8 centos install steps

    install deps yum -y update yum -y install https://download.postgresql.org/pub/repos/yum/reporpms/EL- ...

  9. Checking Types Against the Real World in TypeScript

    转自:https://www.olioapps.com/blog/checking-types-real-world-typescript/ This is a follow-up to Type-D ...

  10. linux常用命令-nginx常用命令

    1.ctrl+alt+f2切换到命令界面 2.ifconfig查看IP 或者IP ADDR(en33 inter) 3.使用putty终端进行交互式操作 4.shell:提供用户输入的命令解释器 常用 ...