vue webpack 打包后css背景图路径问题

weixin_30617561

于 2018-12-25 15:10:00 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/blogs-xlf/p/10174055.html

本文探讨了在Vue项目中使用webpack打包后遇到的CSS背景图片路径报错问题，并提供了解决方案。问题源于webpack处理js和css资源路径的不同方式，通过修改build/utils.js中的配置，指定正确的publicPath，可以有效解决此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在写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)
    }

转载于:https://www.cnblogs.com/blogs-xlf/p/10174055.html