vue-cli CSS 背景图片路径设置

[Dream4ever]

需求描述

在 vue-cli 项目中，需要让 CSS 属性 background-image 属性能正常生效。

方案调研

调研过程

Google：vue-cli css background image，第一个是 SegmentFault 社区的讨论帖：vue-cli build后,组件的css background-image路径错误，看了一下回答，给出来的几个方法感觉都不够好。又看到 cnblogs 上的文章：Vue-cli 构建项目 的.vue组件中, scss中添加背景图路径问题，作者用了 GitHub 上找到的解决方案，很简单，也很好用。

入选方案

• Vue-cli 构建项目 的.vue组件中, scss中添加背景图路径问题

排除方案

• vue-cli build后,组件的css background-image路径错误：不够优雅

应用过程

修改 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)
}

照着上面的方法修改之后，在 CSS 中这样写即可：background-image: url("./assets/bg.jpg");。这样不管是在开发环境下还是在生产环境下，背景图都可以正常显示了。

要点总结

无