第一种方法：

原因:

首先，出错点在url-loader上面。

// url-loader配置

// build/webpck.base.conf.js

{

  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

  loader: 'url-loader',

  query: {

    limit: 10000,

    name: utils.assetsPath('img/[name].[hash:7].[ext]')

}

这里解释一下上面这段url-loader配置，test是正则匹配规则，匹配项目中所有的以正则规则结尾的格式的文件，直白点就是所以的图片（png，jpg，jpeg，gif，svg）。然后用url-loader进行处理。处理也有个规则如下，当不大于10000B的文件进行base64转码，就是将图片转为base64的格式。如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下（从build/utils.js和config/index.js可以知道这个路径就是static/img目录，并且图片名是进行hash之后的值，根目录下面没有static目录，所以会创建一个static目录，至于为什么最后没有看见这个目录后续再说）,当我们创建了一个这样的目录之后，所以的图片访问路径就成了对应的static/img/'图片名'。到这里就可以确定，如果小于10KB的图片转为base64，大于10KB的图片已经将图片路径改为了static/img/'图片名'，然后我们继续来理清访问路径的事情。

// 目前我们的目录结构

index.html

static

    |--img

        |--'picname'

    |--css

        |--app.css

    |--js

        |--app.js

我们知道img为html标签，他的路径是由index.html开始访问的，他走static/img/'图片名'是能正确访问到图片的，所以img的路径没问题，然后app.css访问static/img/'图片名'是访问错误的，因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。

我的解决方法是：

把图片放在static下面

这样打包以后正确

第二种方法：

如果是确定了url是哪个，就可以用这个方法

publicPath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的。

 output:{

     path:path.resolve(__dirname,'dist'),

     filename:'[name].js',

     publicPath: "http://192.168.0.102:1717/"

   }

这样打包以后，路径就由相对路径变成绝对路径了

#tupian {

  background-image: url(http://192.168.0.102:1717/images/b3422d7fb5ba566d1cb9e81efb0e9d7e.jpg);

  width: 100px;

  height: 100px;

  -webkit-transform: rotate(7deg);

  transform: rotate(7deg);

}

<link href=http://192.168.0.102:1717/css/index.css?f6342111d1d5bcbaeb6f rel=stylesheet></head>

<body>

   <div id=tLess></div>

   <div><img src=http://192.168.0.102:1717/images/e3c36035f62cb73913b6a45eeb934dc1.jpg></div>

   <div id=tupian></div>

   <div id=title></div>

<script type=text/javascript src=http://192.168.0.102:1717/entry.js?f6342111d1d5bcbaeb6f></script><script type=text/javascript src=http://192.168.0.102:1717/entry2.js?f6342111d1d5bcbaeb6f></script></body>

工作中推荐使用这个方法

第三个方法：

把背景图片放到其他服务器上，直接引用

Vue项目之背景图片打包后路径错误的更多相关文章

  1. vue css背景图片打包后路径问题

    limit,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 name,后面是打包后的路径: loader,后面 limit 字段代表图片打包限制,这个限制并不是说 ...

  2. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  3. 记录vue项目 用hbuilder离线打包集成极光推送 安卓篇

    极光推送的官方demo: https://github.com/jpush/jpush-hbuilder-demo 里面也记录有详细的方法了. 我记录下自己的过程. 首先去极光那里创建一个应用 获取A ...

  4. vue项目打包后路径出错

    安装完vue后搭建了一个项目,直接执行 npm run dev 是可以正常打开页面的: 但是执行 npm run build 打包项目后打开却报错了,如下: 原来是项目中的静态文件路径报错了... 然 ...

  5. vue项目中，无需打包而动态更改背景图以及标题

    1.背景 今天,项目经理对已完成的项目提出了一个需求,即项目的基础功能目前针对于各个基层法院都适用,而对于不同的法院,我们每次都需要前端研发来更改所属法院的法院名称以及背景图,这样对于演示者来说是非常 ...

  6. react项目打包后路径找不到，项目打开后页面空白的问题

    使用 npm install -g create-react-app快速生成项目脚手架打包后出现资源找不到的路径问题: 解决办法:在package.json设置homepage

  7. 【笔记】vue-cli 打包后路径问题出错的解决方法

    几天之前打包自己的vue 项目上传到远程服务器上面 但是遇到了如下几个问题: 1. 线上浏览页面时是空白页面 2. 打包后资源文件(js, css 文件)引用的路径不正确 3. 开发环境中使用到的如: ...

  8. 解决axios请求本地的json文件在打包后路径出错问题

    vue 项目中使用axios请求了本地项目的static文件夹下的json文件,使用npm run build 打包后,在Hbuilder编辑器打开,页面报错404: 在浏览器打开的路径 http:/ ...

  9. 前端（以Vue为例）webpack打包后dist文件包如何部署到django后台中

    由于现在前端使用的三大框架配合webpack可以实现快速打包,为部署到服务端提供了非常大的便利,那么在前端打包后,应该做些什么可以部署到django的后台中呢? 1.打包后文件包dist 进入到 di ...

随机推荐

  1. c输出格式

    #include <stdio.h> #include <stdlib.h> #include <math.h> int main() { //取整 printf( ...

  2. 洛谷 P3956 棋盘(BFS)

    传送门:Problem P3956 https://www.cnblogs.com/violet-acmer/p/9827010.html 题解: BFS 相关变量解释: color[maxn][ma ...

  3. 在Vue中如何使用axios跨域访问数据（转）

    最近在项目中需要用到axios,所以就恶补一下这个axios到底是什么东东.越来它是vue-resource的替代品,官网也说了,以后都用axios, vue-resource不在维护.那么这个axi ...

  4. udp之关于linux udp收发包缓冲区大小

    1.修订单个socket的缓冲区大小:通过setsockopt使用SO_RCVBUF来设置接收缓冲区,该参数在设置的时候不会与rmem_max进行对比校验,但是如果设置的大小超过rmem_max的话, ...

  5. 20145215《网络对抗》Exp6 信息搜集与漏洞扫描

    20145215<网络对抗>Exp6 信息搜集与漏洞扫描 基础问题回答 哪些组织负责DNS,IP的管理? 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和 ...

  6. Swift学习笔记4

    1.延迟存储属性是指当第一次被调用的时候才会计算其初始值的属性.在属性声明前使用lazy来标示一个延迟存储属性. 必须将延迟存储属性声明成变量(使用var关键字),因为属性的初始值可能在实例构造完成之 ...

  7. PHP7 学习笔记（六）403 Forbidden - WAMP Server 2.5

    今天在wamp目录下有一个项目:comment 我在我的Windows 7机器上安装了WAMP版本2.5. 当浏览器浏览到本地主机时,WAMP服务器页面是可见的. 但是当我浏览到我的本地主机在我的移动 ...

  8. python执行centos命令

    import os improt sys import re import commands a = commands.getoutput("ls -al /") print a

  9. wireshark数据包分析

    最近有不少同事开始学习Wireshark,他们遇到的第一个困难就是理解不了主界面上的提示信息,于是跑来问我.问的人多了,我也总结成一篇文章,希望对大家有所帮助.Wireshark的提示可是其最有价值之 ...

  10. luogu P1357 花园

    传送门 先考虑朴素dp,设\(f_{i,j}\)表示推了\(i\)次,前\(m\)个点的状态为二进制数\(j\)(这里记放C为1),转移的时候枚举下一位放什么,还要考虑是否满足C的个数\(\leq k ...