详谈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引用图片打包后找不到资源文件的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决在vue项目中webpack打包后字体不生效的问题

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unicode编码并且带着双引号, 但使用webpack打包以后,"微软雅黑"的双引号被错误解析并多加了个反斜杠,导致字体不生效. 解决方法: 尝试了一下去掉双引号,也就是font-family:微软雅黑,这样浏览器并不会把中文字体用unicode编码,样式也可以正常显示.但为了更好的兼容性,这里

  • vue+webpack dev本地调试全局样式引用失效的解决方案

    今天遇到了奇怪的问题,在main.js中引入全局样式,在组件中引用样式时,有些样式失效,有些样式生效.但是神奇的是build打包后样式是正常的. 注册两字没有变成红色..刚开始以为是class名字命名冲突之类的,网上查了很多资料,有提到说css文件中写了中文注释引起的,试过了不行.后来把所有的样式删掉,只剩一个样式,就生效了.好了,罪魁祸首就是空格符.build打包时会有压缩,所以不会有这个问题. 进入[utils.js],添加压缩就好了 const cssLoader = { loader:

  • 详谈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路径pu

  • 解决异常FileNotFoundException:class path resource找不到资源文件的问题

    解决异常FileNotFoundException:class path resource找不到资源文件的问题

    近期很多小伙伴问我,为何启动项目的时候Spring  或 Spring MVC资源文件找不到    ,这里我总结几个问题出现的原因和解决方案 一.问题的原因 为何会出现这种FIleNotFoundException呢?  原因无非两点: 1.路径配置错误 2.编译有问题,文件不存在 二.解决办法: 对于第一个原因,这个我们不多说,大家自己看看JavaWeb项目中classpath路径详解,改好配置目录路径,第一个原因排除,给大家一个案例参考 至于第二个原因,编译不成功,导致文件不存在,拿Ecli

  • vue 打包后找不到dist文件夹的解决方案

    vue 打包后找不到dist文件夹的解决方案

    目录 打包后找不到dist文件夹 运行vue打包后的dist文件夹下的项目 需要安装http-server 通过命令行进入到dist文件夹 打包后找不到dist文件夹 接受一个别人做了一半的项目  , 结果要打包测试的时候  执行npm run build 后 没有dist 文件 看了一下 config文件夹里面的index.js 文件 的build对象, 原来是默认的打包路劲被修改了 , 修改回来就好了, __dirname是获取当前位置的绝对路径 运行vue打包后的dist文件夹下的项目 需

  • Maven打包后找不到class文件的问题

    Maven打包后找不到class文件的问题

    目录 1.问题起源 2.可能的原因 3.解决方法 1.问题起源 某个项目Jenkins打包后生成的war包里没有class文件,并且没有任何报错或者警告,打包也提示成功. 2.可能的原因 历经各种折腾,偶然发现某个依赖的jar包在仓库里没有对应的pom.xml文件.但是maven没有报任何错误或者警告,导致一直没有发现.至于为何该依赖没有pom.xml文件,还不清楚原因. 一般情况下,比如我们依赖的commons-dbcp,仓库中包括的文件如下: 但是依赖的某个jar包,在maven仓库里包括的

  • 解决Nodejs全局安装模块后找不到命令的问题

    碰到了这问题,记录一下,看提示应该是环境变量的问题,执行如下命令得到Nodejs的模块安装路径: npm prefix -g 将输出的全局安装路径加入的环境变量的Path条目中即可. 以上这篇解决Nodejs全局安装模块后找不到命令的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Nodejs全局安装和本地安装的不同之处 npm全局模块卸载及默认安装目录修改方法 解决node.js安装包失败的几种方法 修改npm全局安装模式的路径方法 n

  • 解决vue+webpack打包路径的问题

    最近写了一个vue小项目,不想单独作为一个web项目发布,所以就准备放到资源项目的public文件夹下,遇到一些小问题,在此总结一下. 资源路径如下: public目录配置的访问路径为"/",在这样的情况下,我们的访问路径就变成了"域名/vue-demo".访问的时候发下程序未报错,但是页面一片空白.此前也这样发布的项目都没有问题,但这次是怎么回事呢? 仔细探索后发现是vue-router搞得鬼.因项目需要,所以使用了滚动行为,滚动行为必须开启history模式,在

  • 基于vue打包后字体和图片资源失效问题的解决方法

    1. vue打包后font-awesome字体失效 解决方案: 2. 打包后图片资源失效 解决方案: 针对html中引用的图片 针对css添加的背景中引用的图片 以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 解决vue打包之后静态资源图片失效的问题 vue cli使用绝对路径引用图片问题的解决 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题 vue-cli中打包

  • webpack-url-loader 解决项目中图片打包路径问题

    webpack-url-loader 解决项目中图片打包路径问题

    刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里. 下面我们就来分析下在webpack项目中图片的应用场景. 1.CSS文件中的背景图等设置 项目目录图: 以下以我项目中的test.css为例 .test{ color: red; width: 150px; height: 100px; overflow: hidden; background: url("../img/box@2x.png") no-repe

  • vue如何解决循环引用组件报错的问题

    问题由来 最近在做项目的时候遇到使用循环组件,因为模式一样,只有数据不一样.按照普通组件调用格式来做的时候总是报错,错误信息为[Vue warn]: Unknown custom element: <selfile> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 解决方案 查询了网上各种资料之后,发现是

  • 解决java项目jar打包后读取文件失败的问题

    解决java项目jar打包后读取文件失败的问题

    java项目jar打包后读取文件失败 在本地项目读取文件时 this.getClass().getClassLoader().getResource("").getPath()+fileName this.getClass().getResource("/filename").getPath() 都是可以成功的 但是jar打包后上面方式读取文件时 会变成 jar!filename 这样的形式去读取文件,这样是读取不到文件的 可以使用 Test.class.getRe

随机推荐