Using Vue cli to build a project, the font reference path is wrong after packaging

For building owners, the main problem is to configure publicpath for CSS separately. Extracttext webpack plugin provides a options.publicPath Public path can be configured separately for CSS.

For projects generated with Vue cli, the dist directory structure is as follows:

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

A common problem is that the relative path of background image in CSS cannot be correctly referenced to img folder. However, it can be configured with the public path of extracttext webpack plugin.

Change build/ utils.js Options configuration of the extracttextplugin plug-in in the file:

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../',         // 注意配置这一部分，根据目录结构自由调整
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

Finally, the document of extract text webpack plugin is attached github.com/webpack-co…