前一段时间我们写了一个项目，在本地是好的，但是布到线上发现有些字体图标找不到，然后就各种找问题，最后确认是资源文件路径没引用正确导致的，

怎么解决呢：
1、在build的utils文件中配置
原来是

if (options.extract) {
      loaders.push(MiniCssExtractPlugin.loader)
    } else {
      loaders.push('vue-style-loader')
    }

改成

if (options.extract) {
   return ExtractTextPlugin.extract({
     use: loaders,
     publicPath:'../../',           // 此处添加
     fallback: 'vue-style-loader'
   })
 }

或者
2、在config的index.js中的， 原因是vue项目打包后样式目录结构变为static/css

build：{
 assetsPublicPath: '/',
 ...
  //改为
 assetsPublicPath: '../../',

或者
3、在build的 webpack.base.conf.js 文件中配置
打包前：路径是http://localhost:8080/static/…
打包后：路径是/dist/static/css/static/fonts/iconfont.1a028ec.woff

百思不得其解的是-上面文件的实际位置在：/dist/static/fonts/iconfont.1a028ec.woff

一顿网上搜索终于找到一个有用的答案：参考官方文档url-loader

当文件的大小小于limit的值时，使用base64进行转码，你可以在打包好的css中进行查证，看所引用的字体和图片是不是base64格式的，如果大于limit的值，就使用file-loader进行解析，不会使用base64，而是采用路径引入。

修改 limit的值，将其值变大 10000000

{
  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
   loader: 'url-loader',
   options: {
     limit: 10000,
     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
   }
 }
改为
{
   test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
   loader: 'url-loader',
   options: {
     limit: 10000,
     // name: utils.assetsPath('fonts/[name].[hash:7].[ext]'),
     name: ('[name].[hash:7].[ext]'),
     publicPath: '../fonts',
     outputPath: utils.assetsPath('fonts/')
   }
 }      

希望对各位老铁有用！！！！！！！！！！！！