一个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. 基于Java+HttpClient+TestNG的接口自动化测试框架(四)-------参数存取处理

    在真正开始接口测试之前,我们需要对参数的处理进行梳理.这里所说的“参数”,既包含之前在xml中的配置(我们称之为全局参数),也包含在每一条用例中书写的param.全局参数为固定不变的,而根据接口相应获 ...

  2. 你在使用什么 Redis 客户端工具?

    今天发现一个不错的 Redis 客户端工具:AnotherRedisDesktopManager. 兼容 Windows Mac Linux,号称又快又稳定,加载大量 keys 时也不会崩溃. Git ...

  3. 将jar包安装到本地仓库

    通过cmd切换到apache maven 的bin目录 mvn install:install-file -DgroupId=com.antgroup.zmxy -DartifactId=zmxy-s ...

  4. Linux程序守护脚本

    不废话,直接上脚本,[]注释的下发语句需要按需替换: #!/usr/bin/env bash PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/us ...

  5. 认识Class -- 终于不在怂

    引子     本是新年,怎奈新冠肆掠,路上行人,男女老少几乎是全副口罩,形色匆匆:偶尔有一两个裸露口鼻的,估计都是没囤到口罩的,这几天药店几乎都是贴上大字:口罩没货.看着网络上病毒消息满天飞,我也响应 ...

  6. mysql数据库my.ini配置文件中文详解

    mysql数据库my.ini配置文件中文详解 mysqld程序–目录和文件 basedir = path 使用给定目录作为根目录(安装目录). character-sets-dir = path 给出 ...

  7. Redis | 使用redis存储对象反序列化异常SerializationFailedException

    案例 使用Redis进行对象存储,在处理业务逻辑的时候,丛Redis获取对象发现反序列化失败,抛出如下异常: Caused by: org.springframework.data.redis.ser ...

  8. CVE-2020-3110、CVE-2020-3111、CVE-2020 -3118、CVE-2020-3119、CVE-2020-3120 cdpwn 解析

    CVE-2020-3110.CVE-2020-3111.CVE-2020 -3118.CVE-2020-3119.CVE-2020-3120 cdpwn 解析 攻击条件 在同一广播域,黑客即可通过cd ...

  9. 基于 H5 和 webGL 的 3d 智慧城市

    前言 中共中央.国务院在今年12月印发了<长江三角洲区域一体化发展规划纲要>(下文简称<纲要>),并发出通知,要求各地区各部门结合实际认真贯彻落实. <纲要>强调, ...

  10. django登录页面优化

    环境准备 1.python3.6 2.django2.0+ 3.bootstrap3 后台代码 #创建login_check视图函数,用来处理登录 def login_action(request): ...