欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

详谈vue+webpack解决css引用图片打包后找不到资源文件的问题

时间:2021-07-01 08:52:42|栏目:vue|点击:

使用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实现微信分享链接添加动态参数的方法

栏    目:vue

下一篇:解决vue打包报错Unexpected token: punc的问题

本文标题:详谈vue+webpack解决css引用图片打包后找不到资源文件的问题

本文地址:http://www.codeinn.net/misctech/151018.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有