Skip to content

生成的css文件中background url()图片路径问题 #481

New issue
New issue
Closed
Closed
生成的css文件中background url()图片路径问题#481
Labels
improvement
@challengezhou

Description

@challengezhou
challengezhou
opened on Nov 22, 2016 · edited by challengezhou

重现项目在这

使用vue init webpack创建的项目，改了三个地方

  1. webpack.base.conf.js配置文件output的publicPath注释起来
  2. App.vue中给body加了background样式
  3. 把url-loader的limit改成了6000，避免base64转换而不使用file-loader

现象：

npm run dev没问题 因为跟build的目录不同
当npm run build后
提取出来的css文件中url()中图片的路径是static/img/logo.82b9c7a.png这样的，应该是根据url-loader来的，但这个路径是相对于css文件的，所以造成找不到这张图片

个人几个解决方案：

  1. 把webpack配置文件的output的publicPath设置成’/‘（初始化的项目默认是这样的）,这样所有引用文件都会从’/‘开始，不会出现找不到文件的情况。但我是在一个域名下有多个项目的，不一定会把这个项目放到根目录。如：a.com/test1/index.html 会放到test1目录下，如果设置成’/‘就会直接到a.com/下找，还是会找不到，如果修改成/test1 因为这个目录非常多，更新特别频繁，如果每一个都需要修改也挺麻烦，上边的修改把output的publicPath注释起来也是因为这个
  2. webpack.prod.conf.js中ExtractTextPlugin插件目录中的css文件夹搞成上级目录“..”，这样css文件就会跟index.html在相同目录，其中的url目录就会正确了，但感觉破坏了目录结构，不知道好不好~（现在用的这种解决方案，因为多个项目可以使用相同的配置）
  3. 手动改~因为这几次样式里边url()用的还比较少，多了就不靠谱了

这个问题纠结了很久 看了css-loader file-loader文档，看了很多以前的issue，网上查了很久，都没有找到相应的解决方法，因为实在找不到应该修改哪一部分。上边说的几个解决方法，总感觉不靠谱~
忍不了了所以来提个issue 望大牛们指点迷津

Activity

xiaoosnggao

xiaoosnggao commented on Nov 28, 2016

@xiaoosnggao
xiaoosnggao
on Nov 28, 2016

同求问

cristicVictory

cristicVictory commented on Dec 7, 2016

@cristicVictory
cristicVictory
on Dec 7, 2016

我也有引用图片出了问题

githoniel

githoniel commented on Dec 9, 2016

@githoniel
githoniel
on Dec 9, 2016

same to me
it seems option.publicPath of ExtractTextPlugin is broken here

return ExtractTextPlugin.extract('vue-style-loader', sourceLoader,{
	publicPath: "../../../../"
})

just work the same as publicPath: "../" and publicPath: "/"

if set to publicPath: "./../", webpack error with any .vue

Module not found: Error: Cannot resolve 'file' or 'directory' ./../../../../node_modules/extract-text-webpack-plugin/"}
xmflswood

xmflswood commented on Dec 15, 2016

@xmflswood
xmflswood
on Dec 15, 2016

mark

kazupon
added
improvement
on Jan 8, 2017
Krispomoho

Krispomoho commented on Feb 17, 2017

@Krispomoho
Krispomoho
on Feb 17, 2017

同问，主要问题出在background-image的引用里，每次都要先把图片import 进来

Ivorzk

Ivorzk commented on Mar 21, 2017

@Ivorzk
Ivorzk
on Mar 21, 2017

同问

Ivorzk

Ivorzk commented on Mar 21, 2017

@Ivorzk
Ivorzk
on Mar 21, 2017

这个问题 很严重的 因为我们做汽车网站的 有些时候背景图会用到很多！

xiaoyang110

xiaoyang110 commented on Apr 7, 2017

@xiaoyang110
xiaoyang110
on Apr 7, 2017

将真，我也遇到这种问题 ，找了好几天这个问题，最后不得已把这个图片转换成了base64。。。

pangao66

pangao66 commented on Apr 11, 2017

@pangao66
pangao66
on Apr 11, 2017

同问,目前采用手动的方式处理了,没有转化成base64的大图片,路径都会相对css的static,所以错误.只能在打包后生成的app.css里面全部替换,将./static替换成../static,这样暴力解决的,但......

xiaoyang110

xiaoyang110 commented on Apr 11, 2017

@xiaoyang110
xiaoyang110
on Apr 11, 2017

我的解决了，路径改为绝对路径就没问题了

githoniel

githoniel commented on Apr 11, 2017

@githoniel
githoniel
on Apr 11, 2017

这问题还在讨论啊，根据dev/build，给file-loader设置不同的publicPath可以解决dev build时路径不同的问题

但是JS和CSS中图片路径，分别是根据所被引用的CSS或者JS的路径来计算相对路径。如果两者层次不同，就无法用../多次的方式回到相同的某路径来统一路径。这个问题我也没找到方法，但是直接规避就好了

lzqGiser

lzqGiser commented on May 13, 2017

@lzqGiser
lzqGiser
on May 13, 2017

关注一下你的.vue文件，相对于这个来。就可以的

wukongtime

wukongtime commented on May 23, 2017

@wukongtime
wukongtime
on May 23, 2017

mark

liwenlong

liwenlong commented on Jun 5, 2017

@liwenlong
liwenlong
on Jun 5, 2017

mark，也遇到这个问题了，第三方组件里面的css引用img图片了，路径就不对了

pspgbhu

pspgbhu commented on Jun 5, 2017

@pspgbhu
pspgbhu
on Jun 5, 2017

对于楼主的问题，主要是需要单独为 css 配置 publicPath 。
ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api，可以为css单独配置 publicPath 。

对于用 vue-cli 生成的项目，dist 目录结构如下：

dist
├── index.html
└── static
    ├── css
    ├── img
    └── js

经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到 img 文件夹中。但是用 ExtractTextWebpackPlugin 的 publicPath 配置就可以。

更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',         // 注意配置这一部分，根据目录结构自由调整
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

最后附上 extract-text-webpack-plugin 的文档。
https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/README.md

flyher

flyher commented on Jun 6, 2017

@flyher
flyher
on Jun 6, 2017

@xiaoyang110
绝对路径确实可以解决这个问题。

https://stackoverflow.com/questions/35661197/webpack-not-loading-images-from-css-background-image-property

WongYuYe

WongYuYe commented on Jun 7, 2017

@WongYuYe
WongYuYe
on Jun 7, 2017

刚看到的方法的，很有用
https://wongyuye.github.io/2017/06/07/vue-%E6%89%93%E5%8C%85%E8%83%8C%E6%99%AF%E8%B7%AF%E5%BE%84%E9%97%AE%E9%A2%98/

xcsweb

xcsweb commented on Aug 17, 2017

@xcsweb
xcsweb
on Aug 17, 2017 · edited by xcsweb

如果说由后端php分配域名，而我的页面static不放在根目录如何解决，也就不能使用绝对路径了

43 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    improvement

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @kazupon@monw3c@liwenlong@tzq582905@xiaolong2013

        Issue actions
          生成的css文件中background url()图片路径问题 · Issue #481 · vuejs/vue-loader