Vue+Webpack打包之后超过url-loader大小限制的图片在css的background-image中使用路径问题
一个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中使用路径问题的更多相关文章
- vue webpack打包后 iconfont引入路径不对
vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...
- vue webpack打包
webpack构建流程 从启动webpack构建到输出结果经历了一系列过程,它们是: 解析webpack配置参数,合并从shell传入和webpack.config.js文件里配置的参数,生产最后的配 ...
- vue ---webpack 打包上线
先来描述一下期间遇到的问题有哪些: 1.打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404. 2.打包好的静态资源均是绝对路径 ...
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- vue webpack打包 -webkit-box-orient 失效
一行省略 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 超出两行省略 overflow: hidden; text-o ...
- vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
- vue+webpack 打包文件 404 页面空白
最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...
- 使用vue+webpack打包时,去掉资源前缀
在build文件夹下找到webpack.prod.conf.js文件,搜索 filename: utils.assetsPath('css/[name].[contenthash].css'), 将[ ...
- vue webpack打包背景图片
vue的背景图 和 img标签图大于10KB都不会转成base64处理,可以设置limit(不推荐),所以要设置一个公共路径,解决办法如下
随机推荐
- 关于pycharm中输出的内容不全的解决办法
很多时候我们会发现有的时候输出的结果特别多的时候,会在最后输出时用...代替,最后输出一个总长度,那要咋么弄咧? import pandas as pd # 设置显示的最大列.宽等参数,消掉打印不完全 ...
- Xadmin的实现
一.启动 1.前提 配置setting.py文件 INSTALLED_APPS 2.定位Xadmin,找到对应的类 'Xadmin.apps.XadminConfig', 3.根据admin源码,实现 ...
- SpringBoot简单实现登录功能
登陆 开发期间模板引擎页面修改以后,要实时生效 1).禁用模板引擎的缓存 # 禁用缓存 spring.thymeleaf.cache=false 2).页面修改完成以后ctrl+f9:重新编译: 登陆 ...
- Java基础系列1:深入理解Java数据类型
Java基础系列1:深入理解Java数据类型 当初学习计算机的时候,教科书中对程序的定义是:程序=数据结构+算法,Java基础系列第一篇就聊聊Java中的数据类型. 本篇聊Java数据类型主要包括四个 ...
- CSS-14-浮动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Git详解之安装
前言 是时候动手尝试下 Git 了,不过得先安装好它.有许多种安装方式,主要分为两种,一种是通过编译源代码来安装:另一种是使用为特定平台预编译好的安装包. 从源代码安装 若是条件允许,从源代码安装有很 ...
- 推荐一本学习Groovy的书籍Groovy程序设计!
有朋友公司在用groovy开发,于是推荐我学习一下,搜到了这本书: 花了一个月时间读完了这本书!写的很棒,几乎没有废话,全书都是很重要的知识点和很好的讲解,确实像封面说的那样,使用的好可以提高开发效率 ...
- Arduino系列之光照传感器(三)
今天,我将简单做一个当光照值低于某个值的时候,灯光自动打开,当高于某个值的时候,自动关闭. 设计代码原理: 首先,定义一个全局变量,并赋予初始值 然后,初始化程序 将设定某个IO口为输出模式 读取光度 ...
- 练习2-14 求奇数分之一序列前N项和 (15 分)
练习2-14 求奇数分之一序列前N项和 (15 分) 本题要求编写程序,计算序列 1 + 1/3 + 1/5 + ... 的前N项之和. 输入格式: 输入在一行中给出一个正整数N. 输出格式: 在一行 ...
- DOCKER 学习笔记7 Docker Machine 建立虚拟机实战,以及错误总结
前言 通过以上6小节的学习,已经可以使用DOCKER 熟练的部署应用程序了.大家都可以发现使用 DOCKER 带来的方便之处,因为现在的话,只是在一台服务器上部署,这样部署,我们只需要一条命令,需要的 ...