The style and background image path cannot be found when the Vue item is packaged

Problem Description: When the Vue project is packaged, the file is found, but the referenced font and background image cannot be found;

Workaround:

It is primarily necessary to configure Publicpath for CSS separately.
Extracttextwebpackplugin provides a Options.publicpath API that can be configured separately for the CSS Publicpath.

For projects built with VUE-CLI, the DIST directory structure is as follows:

Dist
├──index.html
└──static
    ├──css
    ├──img
    └──js

The frequently encountered problem is that the relative path of background-image in CSS is not referenced correctly in the IMG folder. But with Extracttextwebpackplugin's publicpath configuration, you can.

Change the options configuration of the Extracttextplugin plugin in the Build/utils.js file:

if (options.extract) {
  return extracttextplugin.extract ({
    use:loaders,
    publicpath: '). /.. /',         //Note Configure this section to freely adjust fallback according to the directory structure
    : ' Vue-style-loader '}
} else {
  return [' Vue-style-loader '] . Concat (loaders)
}

Detailed reference: http://blog.csdn.net/lx583274568/article/details/50898366