vue-cli项目背景图片相对路径编译报错
发布于 3个月前 作者 xuanyabing 900 次浏览 来自 问答

各位大神,求助!!! 我用vue-cli创建了项目,为什么css中不能用相对路径引入背景图片呢?如果css中用相对路径引入背景图片,编译的时候会自动添加…/…/…/导致找不图片,报错。(我的背景图片放在了static文件夹下) 屏幕快照 2018-09-25 10.41.05.png 屏幕快照 2018-09-25 10.41.18.png ![ 屏幕快照 2018-09-25 10.41.50.png 如果不用相对路径就不会报错,如下图: 屏幕快照 2018-09-25 10.42.10.png 屏幕快照 2018-09-25 10.45.33.png

3 回复

查了一下相关文档,在 github 上面找到这个,我直接复制过来,楼主看看:

************ 以下是复制 github 的内容 ************ 对于楼主的问题,主要是需要单独为 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 ************ 以上是复制 github 的内容 ************

对应的 url 是:https://github.com/vuejs/vue-loader/issues/481#issuecomment-306202382

@fengzifz 谢谢你,这个我已经配置过了,不是它的问题

run build 之后的资源文件全部生成在 dist 下面,,,所以写 /static 是没错的

回到顶部