The picture under the vue build static/img path is wrong. Ask the boss to take a look at it.

problem description

1. The project path is as follows
Picture description
reset.scss
.footer {
background: url ("/ static/img/top.png") no-repeat;
}
3.npm run build
Image path error. Changing to. / static before / static in debug mode can load the image
if reset.scss footer is changed to. / static/img/top.png webpack error message This relative module was not found
it seems that absolute path can only be used here

Picture description

related codes

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: "./",

}

how to change the static/img image path to a relative path after build?


modify config/index.js

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

Why not put static resources in assets? after packaging, static and index.html cannot refer to resources by referring to the packaged path. The frame structure is like this. You can try it. I don't know whether it can be done or not--


write the relative path of the picture written in CSS, so that both dev and build can be recognized. The reason for the error of
and . / static/img/top.png is that the path is incorrect. You need several .. /

before you reach the path of the static folder with the current .vue / css file of as the starting point.
Menu