详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
更新时间：2018年03月06日 10:16:26 作者：GDUT_YIFEI
下面小编就为大家分享一篇详谈vue+webpack解决css引用图片打包后找不到资源文件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用vue打包，通过css引用图片资源。
.img {
height: 500px;
width: 100%;
background: url("./assets/img/1.jpg") no-repeat;
background-size: 100%;
}
热更新开发环境的效果是这样
但打完包出来的页面却报找不到资源的错误。
查了一下原因，css引入图片再打包后，style-loader无法设置自己的publicPath，于是我改变了ExtractTextPlugin的css路径publicPath。
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
// css 引用图片打包问题
publicPath: '../../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
在build一次，没有报错，正常显示！
以上这篇详谈vue+webpack解决css引用图片打包后找不到资源文件的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了Vuex的属性和作用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要给大家介绍了关于vue.js如何在网页中实现一个金属抛光质感的按钮的相关资料,文中给出了详细的实例代码以及图文将实现的方法介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue filter 完美时间日期格式的方法，文中给大家提到了vue filter方法-时间格式化 的代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
Element UI的el-upload上传组件相信各位小伙伴都已经非常熟悉，最近接了一个新需求，要求在el-upload组件基础上实现分片上传功能，即小于等于5M文件正常上传，大于5M文件切成5M每片上传,那么这个功能怎么实现呢?一起看看吧2022-09-09
vue-cli3.0.4中webpack的dist路径如何修改
这篇文章主要介绍了vue-cli3.0.4中webpack的dist路径如何修改，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue 输入电话号码自动按3-4-4分割功能的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下2023-11-11
element table数据量太大导致网页卡死崩溃的解决办法
当页面数据过多,前端渲染大量的DOM时,会造成页面卡死问题,下面这篇文章主要给大家介绍了关于element table数据量太大导致网页卡死崩溃的解决办法,需要的朋友可以参考下2023-02-02
在现代网页开发中,用户体验日益成为网站成功的重要因素,从加载时间到SEO优化,越来越多的开发者开始关注使用服务端渲染（SSR）来提升应用的表现,本文将深入探讨 Vue 3 的 SSR 特性,并以示例代码展示如何实现这一功能,需要的朋友可以参考下2024-11-11
本文主要介绍了Vue3父子组件互调方法的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
最新评论