关于vue-cli脚手架打包后获取本地大图片或大文件报404的解决办法

最近帮公司同事看一个比较棘手的问题，查了好久终于找到了解决方案，记录下来方便以后碰到这个问题的小伙伴参考。
是这样的，这个项目用vue-cli脚手架构建的项目，使用了 element-ui 中的字体图标，打包之后出现element-icons.ttf报404的错误。

错误图片

查看网上的解决办法都是在 webpack中配置，但是该项目没有配置专门的 wabpack，只有一个 vue.config.js文件，查了好久没有解决，突然想到vue官方有提供vue-cli脚手架配置的说明，具体请看 vue-cli webpack相关配置 。vue将小于4kb的文件默认为内联文件，不会向服务器发送请求，可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将其限制设置为 10kb：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 }))
  }
}

这其实解决了我们项目中引用大图片，如高清背景图，打包后报错的问题，只要将limit后面的数字相应的改大就可以了，当然，太大的图片还是推荐从服务器获取。看了一下element字体文件的大小为10k多一点，仿照这个将config.module改造一下：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('fonts')
        .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
          .use('url-loader')
            .loader('url-loader')
            .tap(options => Object.assign(options, { limit: 20480 }))
    }
}

顺利解决！所以，当百度、google都找不到答案的时候，不妨去官网看看，说不定就可以解决。祝你顺利解决问题哦~~~~