一个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. Gitlab安装配置管理

    ◆安装Gitlab前系统预配置准备工作1.关闭firewalld防火墙# systemctl stop firewalld# systemctl disable firewalld 2.关闭SELIN ...

  2. Docker + node(koa) + nginx + mysql 开发环境搭建

    什么是Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然 ...

  3. ES.01.Elasticsearch安装配置

    Windows版 提纲: 1.   安装Elasticsearch 1.1. 下载Elasticsearch: https://www.elastic.co/cn/downloads/elastics ...

  4. vijos 分梨子

    点击打开题目 很有(wei)趣(suo)的一道题 暴力解法也不难,枚举大小下限与甜度下限,在一个一个地试 显然 O(n^3) 炸掉 但如何将其缩短,只好从那个式子来入手了: C1⋅(ai−a0)+C2 ...

  5. 了解人工智能?-百度AI

    了解人工智能? 什么是人工智能? 由人创造的"智慧能力",同样具备智慧生物的能力 耳朵=倾听=麦克风=语音识别 ASR Automatic Speech Recognition 嘴 ...

  6. linux容器技术和Docker

    linux容器技术和Docker 概述 Docker在一定程度上是LXC的增强版,早期的Docker使用LXC作为容器引擎,所以也可以说Docker是LXC的二次封装发行版,目前docker使用的容器 ...

  7. php--->自己封装的简易版mvc框架

    最近根据自己的理解,封装了一个自己的框架,来重新系统化梳理自己对mvc框架的理解:后续会陆续添加各种新的功能. 欢迎指点交流. GitHub:https://github.com/Frankltf/m ...

  8. SpringBoot任务篇Ⅴ --- 异步任务、定时任务、邮件任务

    Java的任务在项目中需要用到的地方很多,比如,每月月末的财务报表给财务部门,定时给领导发个邮件短信等等.这时候我们就需要用到任务了,任务调度本身涉及到多线程并发.运行时间规则制定和解析.场景保持与恢 ...

  9. centos7+ docker 实践部署docker及配置direct_lvm

    转载于博客园:http://www.cnblogs.com/Andrew-XinFei/p/6245330.html 前言 Docker现在在后端是那么的火热..尤其当笔者了解了docker是什么.能 ...

  10. 自定义HttpMessageConverter实现RestTemplate的exchange方法返回自定义格式数据

    一 概述 实现如下效果代码,且可正常获取到返回数据: ResponseEntity<JsonObject> resEntity = restTemplate .exchange(url, ...