vue build static/img路径下的图片，路径错误，求大佬帮忙看看

Question

问题描述

1.项目路径如下图
图片描述
2.sass目录下reset.scss
.footer{
background: url("/static/img/top.png") no-repeat;
}
3.npm run build
图片路径错误，调试模式下在/static前面改为./static可以加载出图片
如果将reset.scss footer改为./static/img/top.png webpack 报错提示 This relative module was not found
这里好像只能用绝对路径

图片描述

相关代码

1.buid/utils.js
if (options.extract) {

  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../',
  })
}
sass配置
 scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../static/sass/main.scss')
    }
  }

2.config/index.js
build: {

// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',

}

如何将static/img图片路径build之后改为相对路径呢？

Answer 1

修改 config/index.jsbuild: {//...assetsSubDirectory: './static',//...}

Answer 2

写在CSS中的图片路径写相对路径即可，这样dev和build都能识别。而./static/img/top.png错误的原因是路径不对，以当前的.vue/css文件为起点，到达static文件夹路径前你需要若干个../