一个vue项目中有一张图片,在css中background-image中使用,大小超过了url-loader大小限制。
npm run dev的时候一切正常。
npm run build之后图片被直接放在dist/static/img文件夹下,但是打包后的css却在dist/static/css/static/img路径下找该图片,如果我把url-loader大小限制改成超过图片大小也能正常显示,但是图片较大不想这样做,这种情况要如何修改保证打包后路径正确?

修改build/utils.js文件中
if (options.extract) {

 
  return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
添加:publicPath: '../../' 这一段代码

Vue+Webpack打包之后超过url-loader大小限制的图片在css的background-image中使用路径问题的更多相关文章

  1. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  2. vue webpack打包

    webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配 ...

  3. vue ---webpack 打包上线

     先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源均是绝对路径 ...

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

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

  5. vue webpack打包 -webkit-box-orient 失效

    一行省略 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 超出两行省略 overflow: hidden; text-o ...

  6. vue webpack 打包后css背景图路径问题

    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...

  7. vue+webpack 打包文件 404 页面空白

    最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...

  8. 使用vue+webpack打包时,去掉资源前缀

    在build文件夹下找到webpack.prod.conf.js文件,搜索 filename: utils.assetsPath('css/[name].[contenthash].css'), 将[ ...

  9. vue webpack打包背景图片

    vue的背景图 和 img标签图大于10KB都不会转成base64处理,可以设置limit(不推荐),所以要设置一个公共路径,解决办法如下

随机推荐

  1. 大厂面试中三次握手延伸出来n连发你受得了?

    目录 一.这是一次有故事的对话 二.三次握手的客户端服务端状态 1 先画个图看看有哪些状态 2 tcp协议内容解析 3 通过工具wireshark来验证我们所述 三.说下Linux网络编程常用API ...

  2. kubernetes concepts -- Pod Overview

    This page provides an overview of Pod, the smallest deployable object in the Kubernetes object model ...

  3. request session

    例子 url = 'http://beanhome.com/user/login' header = { "Content-Type": 'application/json', & ...

  4. php代码没解析成功

    在Apache中加载PHP模块 1.打开Apache的配置文件httpd.conf(位于Apache2\conf 目录下). 2.查找 “#LoadModule ssl_module modules/ ...

  5. [bzoj3143] [洛谷P3232] [HNOI2013] 游走

    Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...

  6. 【java基础】妙记进制转换

    一.二进制与十进制 1.正整数十进制转二进制 口诀:除二取余,倒序排列 解释:将一个十进制数除以二,得到的商再除以二,依此类推直到商等于一或零时为止,倒取将除得的余数,即换算为二进制数的结果 例如把5 ...

  7. 从零开始ming的多人联机游戏(3)为socket通讯添加mysql数据库

    macOS下visual studio C#加载mySql 本文在上一节的基础上,添加了mysql数据库的功能.client发送信息给服务器后,服务器将收到的消息保存在数据库中. 如果client发送 ...

  8. CSS-05-伪类及伪元素选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. MGR监控报警

    一.报警思路 m.conf文件记录配置信息,只需要修改这个文件的内容即可(需要将mysql_stat.sh里面的信息写到这里,进行中) mysql_stat.sh文件作为MGR状态监测脚本,加入定时任 ...

  10. Web 开发工具类(2): HttpClientUtils

    HttpClientUtils 整合了一些 web开发中常用的httpClient操作: package com.evan.common.utils; import java.io.IOExcepti ...