vue.js - 打包后，css中背景图路径出错

当我们通过vue-cli 搭建好项目，并做完项目之后，开开心心的npm run build 之后，

发现项目中的背景图片不见了，蒙圈中....

别懵了，我来拯救你。

首先，我的静态资源目录如下：

首先我们找到/build/webpack.prod.conf.js文件，并打开。找到output 关键词所在的地方

配置代码如下：

  output: {
    publicPath: './', // 只加入了这一行，其它的未变
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },

然后第二步：找到/build/utils.js文件，找到options.extract 关键词所在地方

配置如下：

   if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../' // 只加入了这一行
      })

这个时候，在重启，npm run build ，

怎么样，妈妈再也不用担心我路径出错了吧。