webpack插件 mini-css-extract-plugin 图片路径不正确

在这里插入图片描述
使用了后报错如上:

路径是相对css的路径,导致背景图访问出错!!!

解决方式:
找到build/util.js文件

对应的如下代码:

  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = []

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      loaders.push(MiniCssExtractPlugin.loader)
    } else {
      loaders.push('vue-style-loader')
    }

    loaders.push(cssLoader)

    if (options.usePostCSS) {
      loaders.push(postcssLoader)
    }

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    return loaders
  }

修改如下:

  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    const loaders = []

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      // loaders.push(MiniCssExtractPlugin.loader)
      /********************* 划重点 *************************/
      loaders.push({
        loader:MiniCssExtractPlugin.loader,
        options: {
          publicPath: '../../'
        }
      })
      /********************* 划重点 *************************/
    } else {
      loaders.push('vue-style-loader')
    }

    loaders.push(cssLoader)

    if (options.usePostCSS) {
      loaders.push(postcssLoader)
    }

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    return loaders
  }

你可能感兴趣的:(#,前端-vue,vue-cli,webpack)