解决办法1：

 

一开始图片图片放在了assets文件夹下，img和background-image引用都用相对路径，build的时候设置assetsPublicPath: ‘./‘，打包出来后发现background-image的路径出现了问题

 

解决方法：

 

1、先在data里面导入这张图片，例如：
bg:require(‘./openIndexBG2.jpg’)

 

2、然后在template里面对需要background-image属性的DOM做个绑定，例如：
:style=”{backgroundImage: ‘url(‘ +bg + ‘)’}”

 

这样就可以避开因打包而造成的的路径问题了,非常实用！
 

 

解决办法2：

查了下webpack关于路径处理的文档，使用绝对路径的时候会被直接忽略，例如:

background-image: url("/static/img/baseBg.png");
//打包后原封不动emmmmmm····

但是在css中使用相对路径会因为项目文件分级出现异常多的"../../../../../"，最后的解决方案是使用模块路径，图片放到src/assets/img中，自己配置了一个alias:

//在webpack.base.conf.js中
alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'img':resolve('src/assets/img')  //配置一个img的别名指向src/assets/img
    }
//相对应的路径就写成:
background-image: url("~img/baseBg.png");//"~"号代表使用alias
//打包发布的时候参照pspgbhu的方法配置

此方案优点就是路径简洁明了，打包的时候会转为相对路径便于项目发布，缺点就是IDE无法识别，会提示错误

 

解决办法3：

这个问题，主要是需要单独为 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

 

解决办法4：

个人总结：尽量规避掉这个问题就好了，在比较小的的图片的前提下可以使用background-image，打包时会自动转换为base64，自然不存在路径问题。具体转换图片大小可自行修改limit配置，可参考：

// url-loader配置
// build/webpck.base.conf.js
{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 loader: 'url-loader',
 query: {
  limit: 10000,
  name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

而在较大图片时，能用img就最好用img，如果逼不得已需要使用background-image，也可以将所有项目需要用到的背景图放在一个文件夹下整理，然后去修改   build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：

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

再不济，也可以使用先将图片传到服务器上，使用http链接图片，这样肯定是没有路径问题了。但是不推荐！

基本按照这样的几个方法就可以解决了，按需选择！