build 下的utils.js中添加配置

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../',//配置背景图片打包后路径出错问题
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}

打包后发现一部分背景图片还是没显示出来。后来找到一个规律:凡是行内样式中写的style:background的背景图片都没出来,

解决方法:将style样式写到css中,打包后图片显示正确。理由暂不清楚。

vue上线后,背景图片路径错误的更多相关文章

  1. 解决Vue打包后背景图片路径错误问题

    1.原因解析 当用vue-cli自动构建项目后,有两种运行方法,分别是: npm run dev : 提供一个开发的环境,自动热更新,资源使用绝对路径,所以可以正常看到背景图片. npm run bu ...

  2. Vue项目开发之打包后背景图片路径错误的坑

    在开发vue项目的过程中,使用浏览器进行预览的时候所有图片的路径是没有任何问题的,但是在打包后传到服务器上,在微信端查看背景图片时,background的图片竟然不显示,img标签里的图片却是正常展示 ...

  3. Vue项目打包后背景图片路径错误

    vue项目打包之后背景图片出错的解决方案如下: 1,找到 config->index.js里面,如下修改 默认配置: env: require('./prod.env'), index: pat ...

  4. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  5. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  6. vue+webpack项目打包后背景图片加载不出来问题解决

    在做VUE +的WebPack脚手架项目打包完成后,在IIS服务器上运行发现项目中的背景图片加载不出来检查项目代码发现是因为CSS文件中,背景图片引用的路径问题;后来通过修改配置文件,问题终于解决了, ...

  7. vue图片、背景图片路径问题

    vue图片.背景图片路径问题 vue中引入图片经常会出现路径问题,在此记录一下: 1.组件中 <img> 引用图片 <img src="../assets/img/logo ...

  8. webpack学习笔记——打包后直接访问页面,图片路径错误

    我说的这种图片路径错误是这样的,运行webpack-dev-server,一切正常,没有错误.当webpack之后,直接打开index页面,报错,图片找不到,找不到的原因是路径错误. 先看我的项目代码 ...

  9. vue 打包的项目当背景图路径错误

    当背景图路径错误时: 在build/utils.js中添加或更改这句话:publicPath: '../../',

随机推荐

  1. python------面向对象进阶反射详解(重点)

    一.反射 通过字符串映射或者修改程序运行时的状态,属性,或者方法. 1.getattr(object,name,default=None) 2.hasattr(object,name) 3.setat ...

  2. kali 2018.2版本运行破解版burpsuite时候的问题。

    最近重装了kali虚拟机,装完之后把burp拷到里面发现运行不了了,折腾了下才解决,问题主要是由于java环境造成的. 系统默认是以java10运行burp的,但是java10好像是不支持    -X ...

  3. day11 大纲

    01 昨日内容回顾 函数名的运用: 1,特殊的变量. 2,函数名可以当做变量赋值. 3,函数名可以当做容器类类型的元素. 4,函数名可以当做函数的参数. 5,函数名可以当做函数的返回值. 函数的运用: ...

  4. 设置Tomcat管理员用户名和密码

    http://dove19900520.iteye.com/blog/1774980 今天tomcat出点问题,然后我就想进入tomcat manager看看,结果怎么输入密码都不行,后来网上查了查才 ...

  5. 阿里轻量应用服务器 Tomcat 注意的地方 Unsupported major.minor version 52.0(unable to load class

    本地编译工程,提交到远程服务其的tomcat上报这个错 Unsupported major.minor version 52.0(unable to load class com.cl.busines ...

  6. Sqlite之事务

    12.Sqlite事务介绍: 11.android SQLite 批量插入数据慢的解决方案 (针对于不同的android api 版本) ========== 12.Sqlite事务介绍: 应用程序初 ...

  7. 把已经安装到C盘的软件完美移动到D盘

    背景信息 今天早上在安装软件的时候发现C盘爆满,只剩下最后10G了.而我要安装的玩意儿必须装到C盘. 靠清理垃圾文件来解决并不是一个好方法,实际上通常垃圾文件占用很少,而且就算清理了,也还会再出现. ...

  8. rabbitmq (一)用法

    首先,主机一是window系统,虚拟机二 ubuntu, ubuntu部署了rabbitmq服务端.默认监听5672端口. 由于rabbitmq内部有严格的权限系统,使用之前必须配置好权限. 默认网页 ...

  9. 关于PHP代码复用‘traits’的一段代码

    附:代码摘自菜鸟教程 <?php// 定义一个类名Base对象,并带有公共函数sayHello class Base { public function sayHello() { echo 'H ...

  10. linux tail 命令详解

    linux ---tail命令 linux中tail命令---用于查看文件内容 最基本的是cat.more和less. 1. 如果你只想看文件的前5行,可以使用head命令,如: head -5 /e ...