.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里面写的背景图片的路径出错问题的更多相关文章

  1. 用css来写一个背景图片的切换

    代码如下: <!DOCTYPE HTML> <htmllang="en-US"> <head> <meta charset="U ...

  2. vue和webpack打包 项目相对路径修改

    一般vue使用webpack打包是整个工程的根目录,但是很多情况下都是把vue打包后的文件在某子目录下. 修改: 1,打开index.js assetsPublicPath:'/' 改为: asset ...

  3. vue之webpack打包工具的使用

    vue之webpack打包工具的使用 一.什么是webpack? webpack是一个模块打包工具.用vue项目来举例:浏览器它是只认识js,不认识vue的.而我们写的代码后缀大多是.vue的,在每个 ...

  4. vue cli 3 打包过大问题

    vue cli 3 打包命令 npm run build,这种情况下的打包可以通过设置 vue.config.js里面的 productionSourceMap: false. 如果是自己设置的打包环 ...

  5. vue 使用webpack打包后路径报错以及 alias 的使用

    一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...

  6. css网页中设置背景图片的方法详解

    在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等   用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...

  7. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  8. @vue/cli 3 打包文件读取绝对路径处理

    @vue/cli 3 封装了 webpack.config.js,一般都在 vue.config.js 里面配置,官网不推荐在 webpack 的 output 处理,这里踩了一下坑,希望可以帮到后面 ...

  9. vue项目 webpack打包后,图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

随机推荐

  1. MySQL数据库之慢查询日志

    一.开启慢查询日志 通过show global variables like '%slow%' #查看MySQL慢查询日志是否开启 [root@mysqlmaster01 ~]# mysql --lo ...

  2. 有关Linux

    关于nginx https://www.cnblogs.com/jingmoxukong/p/5945200.html 停止命令 sudo systemctl stop nginx.service

  3. 单层反查BOM

    *&---------------------------------------------------------------------* *& Report YCX_001 * ...

  4. 【Leetcode_easy】657. Robot Return to Origin

    problem 657. Robot Return to Origin 题意: solution1: class Solution { public: bool judgeCircle(string ...

  5. iOS-UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影

    iOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影 隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor ...

  6. python:python2与python3共存时,pip冲突,提示Fatal error in launcher: Unable to create process using '"d:\python27\python2.exe" "D:\Python27\Scripts\pip2.exe" '

    问题背景: 机器上同时装了python2.和python3后,导致只能用pip3了,使用pip2时提示:Fatal error in launcher: Unable to create proces ...

  7. 【c# 学习笔记】面向对象编程的应用

    在平时的开发过程中,面向对象编程的应用肯定必不可少.但前面的内容只是单独介绍了类.面向对象思想和接口,那么我们怎么在平时工作中来应用他们来实现面向对象编程呢? 如果你想设计一个Dog类,有了类的概念后 ...

  8. 渡鸦币(Raven)钱包交叉编译详解

    1 环境准备 1.1 准备Ubuntu 准备虚拟机或物理机,操作系统为Ubuntu 16.04 1.2 安装Mingw sudo apt-get install g++-mingw-w64-i686 ...

  9. hupu面试

    1.mybatis更新一条数据时,如果某字段为空,则不更新它,使用默认值? <update id="updateProduct" parameterType="Pr ...

  10. 处理人际关系的5大原则zz

    人际关系题是结构化面试当中重要的题型之一,人们常用两个“70%”来形容人际关系的重要性: 人际关系题主要考察考生不同人际关系间的适应性.人际合作的主动性.处理人际关系的原则性和灵活性以及对组织中权属关 ...