Sign in

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

qiamy edited in Thu, 08 Apr 2021

The following figure is the code of referencing font file in CSS, and the project directory structure

Here is a screenshot of the wrong path

Yes and build/ webpack.base.conf Is. JS relevant?

2 Replies
commented on Thu, 08 Apr 2021

You'd better put font in the static directory

commented on Thu, 08 Apr 2021

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:

├── 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 https://github.com/webpack-co...

lock This question has been locked and the reply function has been disabled.