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.html
index: path.resolve(__dirname, '../dist/index.html'),

// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',

}

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

Answer 1

修改 config/index.js

build: {
//...
assetsSubDirectory: './static',
//...
}

Answer 2

静态资源为什么不放在assets里呢，打包之后static和index.html,不能用引用打包后的路径来引用资源。框架结构是这样。可以试一下。能不能成我也没底 --=

Answer 3

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