最近在写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. 【xsy2506】 bipartite 并查集+线段树

    题目大意:有$n$个点,你需要操作$m$次.每次操作为加入/删除一条边. 问你每次操作后,这$n$个点构成的图是否是二分图. 数据范围:$n,m≤10^5$. 此题并没有强制在线,考虑离线做法. 一条 ...

  2. 10-04 Java 权限修饰符,类及其组成常见的修饰符

    四种权限修饰符的测试 /* 权限修饰符: 本类 同一个包下(子类和无关类) 不同包下(子类) 不同包下(无关类) private Y 默认 Y Y protected Y Y Y public Y Y ...

  3. iis7 bug解决

    只需重新注册下AspNet就可以了,具体步骤如下 1 打开运行,输入cmd进入到命令提示符窗口. 2 进入到C:/WINDOWS/Microsoft.NET/Framework/v2.0.50727 ...

  4. 微信小程序开发语言的选择

    微信使用的开发语言和文件很「特殊」. 小程序所使用的程序文件类型大致分为以下几种: ①WXML(WeiXin Mark Language,微信标记语言) ②WXSS(WeiXin Style Shee ...

  5. js实现四叉树算法

    最近在看canvas动画方面教程,里面提到了采用四叉树检测碰撞.之前也看到过四叉树这个名词,但是一直不是很懂.于是就又找了一些四叉树方面的资料看了看,做个笔记,就算日后忘了,也可以回来看看. Quad ...

  6. 对类型“DevExpress.Xpf.Grid.GridControl”的构造函数执行符合指定的绑定约束的调用时引发了异常。

    用VS2012 修改别人的WPF代码时碰到这个问题,百度下有人遇到相同问题,不过版本不同,先试下再说. 解决方法:安装Netframework4.5的补丁 地址:http://support.micr ...

  7. 分布式理论(六)—— Raft 算法

    前言 我们之前讲述了 Paxos 一致性算法,虽然楼主尝试用最简单的算法来阐述,但仍然还是有点绕.楼主最初怀疑自己太笨,后来才直到,该算法的晦涩难懂不是只有我一个人这么认为,而是国际公认! 所以 Pa ...

  8. C# 在项目中配置Log4net

    我们介绍一下在项目中配置log4net,是Apache基金会旗下的. 无论在什么环境中,配置log4net的逻辑都一样. 1)文件配置 首先在项目加载文件中,配置log4net加载项. 在Web项目中 ...

  9. ASP.NET MVC的JavaScriptResult

    前段时间,我们有学习<在ASP.NET MVC使用JavaScriptResult>http://www.cnblogs.com/insus/p/3960994.html ,今天我们来加强 ...

  10. .NET Core类库中读取配置文件

    最近在开发基于.NET Core的NuGet包,遇到一个问题:.NET Core中已经没有ConfigurationManager类,在类库中无法像.NET Framework那样读取App.conf ...