最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题

奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了。

稍微查了一些资料,发现是webpack自身问题。在webpack中,js和css引入资源的路径是不一样的,js是以调用的位置决定的,而css是以自身的位置决定的,这就导致了css的资源多套了一到多层。

在vue项目中,解决方法也炒鸡简单,只需改一下配置即可:

//build/utils.js
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' //多添加这一句,具体的相对路径根据自己的项目路径而定
})
} else {
return ['vue-style-loader'].concat(loaders)
}

vue webpack 打包后css背景图路径问题的更多相关文章

  1. vue项目打包后css背景图路径不对的问题

    问题描述: 自己在自学vue做项目的过程中,遇到一个有关背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常显示的 ...

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

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

  3. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

  4. vue build打包后css里的图片路径404不正确的问题

    vue build打包后css里的图片路径404 在vue-cli项目中build/utils.js中找到如下代码块,添加 publicPath:’../../’ if (options.extrac ...

  5. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  6. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  7. vue项目打包后资源相对引用路径的和背景图片路径问题

    vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...

  8. vue打包后css背景图片地址找不到

    背景图片变成了这样:static/css/static/imgs/xxx.jpg 解决方法,修改build/utils,添加   publicPath: '../../'    就行 对比了下,com ...

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

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

随机推荐

  1. WebDriver高级应用实例(10)

    10.1控制HTML5语言实现的视频播放器 目的:能够获取html5语言实现的视频播放器视频文件的地址.时长.控制进行播放暂停 被测网页的网址: http://www.w3school.com.cn/ ...

  2. 10-03 Java 包的概述和讲解

    带包的编译和运行 A:手动式 a:编写一个带包的java文件. b:通过javac命令编译该java文件. c:手动创建包名. d:把b步骤的class文件放到c步骤的最底层包 e:回到和包根目录在同 ...

  3. atexit()使用

    mian()主函数执行完毕后,是否可能会再执行一段代码?如果需要加入一段代码在mian退出后执行的代码,可以使用atexit()函数注册一个函数,代码如下: #include <iostream ...

  4. StreamSets学习系列之启动StreamSets时出现Caused by: java.security.AccessControlException: access denied ("java.util.PropertyPermission" "test.to.ensure.security.is.configured.correctly" "read")错误的解决办法

    不多说,直接上干货! 问题详情 [hadoop@master streamsets-datacollector-]$ ./bin/streamsets dc Java 1.8 detected; ad ...

  5. 轻量级web富文本框——wangEditor使用手册(6)——配置“上传图片”功能

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  6. curl常用命令【转】

    原文地址: http://www.thegeekstuff.com/2012/04/curl-examples/ 下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://w ...

  7. 深度理解C# 的执行原理

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂优文发表于云+社区专栏 从编译原理说起 虚拟机是什么 C# 是什么,IL 又是什么 .Net Framework vs Mono ...

  8. AI---训练集(train set) 验证集(validation set) 测试集(test set)

    在有监督(supervise)的机器学习中,数据集常被分成2~3个即: 训练集(train set) 验证集(validation set) 测试集(test set) 一般需要将样本分成独立的三部分 ...

  9. 下载imagenet2012数据集,以及label说明

    updated@2018-12-07 15:22:08 官方下载地址:http://www.image-net.org/challenges/LSVRC/2012/nonpub-downloads , ...

  10. ffplay源码分析7-播放控制

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10316225.html ffplay是FFmpeg工程自带的简单播放器,使用FFmpeg ...