vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题
.bg
width 100%
position fixed
left 0
top 0
height 100vh
z-index -1
background url('~@/assets/imgs/bg9.jpg') center no-repeat // 这个背景图片
background-size cover
filter blur(4px)
打包生成后的地址:
.login .bg[data-v-c3a977bc] {
width: 100%;
position: fixed;
left:;
top:;
height: 100vh;
z-index: -1;
background: url(img/bg9.32c9a00.jpg) 50% no-repeat; // 这个地址就会变成 。。。。前面的绝对地址 + css + img/bg9.32c9a00.jpg,变成在css目录下找img了
background-size: cover; filter: blur(4px); }
由于webpack打包图片会设置一个最大的图片大小,超过这个图片大小,就不会转化成base64的,还是直接转换成图片:
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 这个是限制大小的
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
所以之前打包的时候没有问题因为我的图片大小是可以转换成base64的,坐下面设置就可以找到:
assetsPublicPath: './'
现在需要更改build文件夹下面的util.js:
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../', // 这个地方是我新加的,让css里面找路径都往上再找一级
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
vue-cli || webpack 打包的时候css里面写的背景图片的路径出错问题的更多相关文章
- 用css来写一个背景图片的切换
代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...
- vue和webpack打包 项目相对路径修改
一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...
- vue之webpack打包工具的使用
vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...
- vue cli 3 打包过大问题
vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
- vue webpack打包后.css文件里面的背景图片路径错误解决方法
资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...
- @vue/cli 3 打包文件读取绝对路径处理
@vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...
- vue项目 webpack打包后,图片路径是绝对路径
vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...
随机推荐
- shell统计ip访问情况并分析访问日志
有日志 1.log,部分内容如下: 112.111.12.248 – [25/Sep/2013:16:08:31 +0800]formula-x.haotui.com“/seccode.php?upd ...
- osg::NodeVisitor osg3.4.0
x:-89.4588 y:-12.1245 z:-11.7807x:-89.4588 y:-6.44823 z:-11.7807x:-89.2164 y:-9.07239 z:-11.811x:-89 ...
- Arduino---HC-05 蓝牙模块
蓝牙基础知识回顾: (一)Arduino和HC-05连接 注意:Arduino通过TX与HC-05进行通信,而Arduino的电压为5V,HC-05的允许电压为3.3V.短时间通信无妨(长时间可能烧毁 ...
- 123457123456#0#-----com.threeapp.MakerHanBao01----儿童汉堡制作游戏
----com.threeapp.MakerHanBao01----儿童汉堡制作游戏
- asp.net怎样实现批量下载文件(非打包形式下载)
问题: 我想实现的是一个一个的下载. 比如我有一个文件列表.通过checkbox选择.通过单击下载按钮下载选中文件. 百度到都是用打包形式实现批量下载. 这是我自己写的代码,但是点击下载后只能下载一个 ...
- OO ALV事件里使用E消息,下一步会退出到系统初始界面
在OO ALV data_change事件时(选中行),锁定KEY值, 继续,取消选择,退出到系统初始界面 改成 pv_status = 'E'. pv_msg = '采购订单' && ...
- Oracle ORA-00984: column not allowed here
ORA-00984错误: 列在此处不允许当数据以char的形式存在时,应加单引号,则插入数据库就不会出现类似错误.
- HttpRequest Get和Post调用其他页面的方法
HttpRequest Get和Post调用其他页面的方法,需要的朋友可以参考一下 //Get请求方式 private string RequestGet(string Url) { ...
- cursor -- 定义鼠标样式
cursor -- 定义鼠标样式 取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | n ...
- word模板文档填充数据
1.切记一定要用Word 97-2003(*.doc)格式的文档另存为 *.xml格式的文件,而不能用 Word 2007(*.docx)格式的word文档转 *.xml,将转成功之后的xml文件放入 ...