一个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. crawler碎碎念5 豆瓣爬取操作之登录练习

    import requests import html5lib import re from bs4 import BeautifulSoup s = requests.Session() #这里要提 ...

  2. cocoa pods最新安装说明和使用方法

    最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sources - ...

  3. Django 导入配置文件

    from django.conf import settings

  4. [UVA1494] Qin Shi Huang's National Road System

    题目 戳这里 题解 从今天起我要改邪归正,好好刷题准备联赛! 这是一道经典的最小生成树题目. 枚举每一条边作为道士要修的路,求出包含这条边的最小生成树. 先求出原图的最小生成树. 如果要删的边在最小生 ...

  5. Uva1014:Remember the Word

    Neal is very curious about combinatorial problems, and now here comes a problem about words. Knowing ...

  6. 10、python函数

    前言:本文主要介绍python函数的定义和调用.函数的参数.函数的作用域.内置函数. 一.函数的定义和调用 1.函数的作用 对特定的一些功能进行封装,提高代码的重用率,进而提升开发的效率,格式: de ...

  7. python多层数组合成一个数组后循环打印出数组内的每一项元素的方法

    a=[1,2,3,4] b=[5,6,7,8] c=[a,b] def test(c): for i in c: return i print(test(c)) 以上代码执行后打印出来的结果是 预期目 ...

  8. PKU-2723 Get Luffy Out(2-SAT+二分)

    Get Luffy Out 题目链接 Ratish is a young man who always dreams of being a hero. One day his friend Luffy ...

  9. Codeforces_723_A

    http://codeforces.com/problemset/problem/723/A 取中间那个数就可以了,答案为最大值减最小值. #include<iostream> #incl ...

  10. socket实现文件上传(客户端向服务器端上传照片示例)

    本示例在对socket有了基本了解之后,可以实现基本的文件上传.首先先介绍一下目录结构,server_data文件夹是用来存放客户端上传的文件,client_data是模拟客户端文件夹(目的是为了测试 ...