Solution for ttf font not found after vue cli+webpack project is packaged to server

Change the options configuration of the ExtractTextPlugin plug-in in the build/utils. js file:

if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 publicPath: '../../',   //  Pay attention to configuring this 1 Part, freely adjust according to the directory structure 
 fallback: 'vue-style-loader'
 })
} else {
 return ['vue-style-loader'].concat(loaders)
}

Supplementary knowledge: webpack can't find. ttf and. woff files after running vue project, or the path is reported to be wrong

In the webpack. base. config file, some people may be in utils. js

Before modification:

{
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
 use: [ ' css-loader?minimize ' ,  ' autoprefixer-loader ' ],
 fallback:  ' style-loader ' 
 })
},
{
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
 use: [ ' css-loader?minimize ' , ' autoprefixer-loader ' ,  ' less-loader ' ],
 fallback:  ' style-loader ' 
 }),
},

After modification:

{
 test: /\.css$/,
 use: ExtractTextPlugin.extract({
 use: [ ' css-loader?minimize ' ,  ' autoprefixer-loader ' ],
 publicPath: ' ../../ ' ,
 fallback:  ' style-loader ' 
 })
},
{
 test: /\.less$/,
 use: ExtractTextPlugin.extract({
 use: [ ' css-loader?minimize ' , ' autoprefixer-loader ' ,  ' less-loader ' ],
 publicPath: ' ../../ ' ,
 fallback:  ' style-loader ' 
 }),
},
{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  loader: 'url-loader',
  options: {
   limit: 10000,
   name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
}

For ttf/woff-ending files loaded using url-loader, find the loader change packaging path to load style.

That is, when reloading css, change the publicPath path to "../../", and customize it according to your own directory structure. Only in this way can the packaged project find the corresponding application path. Why should we change it like this? It is because our path should be found according to the packaged hierarchical structure, not according to the original project itself, and there is still one relative path that can't be found sometimes, so we should change it to this absolute path and look for it again under static.