webpack configuration - image path error

question

The project works fine in the development environment, but when the package is packaged, the image disappears, and after inspecting the element, it is found that the path is wrong. The image path is like this: background: url(/static/img/bg_camera_tip.bd37151.png), but the file does not exist in this path.
After packaging, the file directory is as follows:
file path after packaging
You can see that the path of the background image should be ../../staticbut it is /static, and it will be solved after finding the reason.

method one

View the configuration in the builddirectory webpack.base.conf.js, the image files will be url-loaderprocessed.

 module: {
    rules: [
      ...
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      ...
    ]
  }

Its function is limitto return a base64 string when the file size is less than the limit. In fact, it is to encode the image resource as a base64 string and put it in the CSS file, which can reduce a network request, because each image needs to be sent from the server. to download. However, if the file is too large, the base64 string will be very long. If it is placed in the CSS file, the file will be very large, and the download time of the CSS file will be longer limit. It will be converted into a base64 string, and its unit is bytes. For this problem, the loader also provides a publicPathparameter, the purpose is to modify the referenced image address, the default is the current path, then you can change it directly, that is options, add a parameter under the node publicPath: '../../'.

 module: {
    rules: [
      ...
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          publicPath: '../../', //你实际项目的引用地址前缀
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      ...
    ]
  }

Method Two

webpack.base.conf.jsThere is also a rule, every vue file will be vueLoaderConfigprocessed

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      ...
    ]
  }

vueLoaderConfigis located build/vue-loader.conf.js, which in turn calls the build/utils.jsmethod cssLoadersof .

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    }

If it is the production environment options.extractvalue true, this plugin will be called ExtractTextPluginfor processing. Its function is to extract the style files referenced in the project into a separate CSS file, so that all CSS files can be loaded at one time, which is equivalent to parallel loading of CSS files. , which can reduce the number of network requests. For more advantages and uses, see ExtractTextWebpackPlugin . Returning to this question, it also has a parameter that publicPathcan override the specified loaderconfiguration publicPath, so just like the previous configuration, loaderthe path address of the reference file can be given to all unified configurations.
In addition, user:loaderwhat is actually here is to return a series of loadercollections, and cssLoadersthe return is

  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

That 's why the syntax can be used even if you don't webpack.base.conf.jsconfigure it in .sass-loaderSASS