vue-elementui-admin项目 woff，tff字体 404处理_如何禁用element-icons.woff请求-优快云博客

本文链接：https://blog.youkuaiyun.com/bluefish_flying/article/details/95070182

本文详细解析了ElementUI在使用字体图标时遇到的404错误，主要原因是打包后的文件路径与预期不符。通过调整Webpack配置，特别是publicPath属性，成功解决了这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、出现原因
elementui 的css woff tff 的路径
在这里插入图片描述
然后打包的文件路径为 dist
这就直接造成了最后的访问路劲为
http://127.0.0.1/dist/static/css/static/font.element-iconsXXX.woff

这样导致直接就多了static/css两层路径最后导致404

在网上看了好多资料是说加个
publicPath:’…/…/’
但是就是不知道放在什么地方。。。。。。。。。。。。。。。。

思考：

查看最原始的elementui 使用的是 ExtractTextPlugin webpack是3.10.0的

在下面的代码中添加

publicPath:’…/…/'就可以解决404问题了

return ExtractTextPlugin.extract({
use: loaders,
fallback: ‘vue-style-loader’，
publicPath:’…/…/’
})
// generate loader string to be used with extract text plugin

  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'，
        publicPath:'../../'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

在看本地是用的webpack 4.16.0 使用的是MiniCssExtractPlugin

  function generateLoaders(loader, loaderOptions) {
    const loaders = []

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      loaders.push(MiniCssExtractPlugin.loader)
    } else {
      loaders.push('vue-style-loader')
    }

    loaders.push(cssLoader)

    if (options.usePostCSS) {
      loaders.push(postcssLoader)
    }

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    return loaders
  }

最后只能仿照上面的模式写一个了

 function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap,
        }),
      })
    }
    //  if (options.extract) {
    return [
      options.extract ? {
        loader: MiniCssExtractPlugin.loader,
        options: {
          publicPath: '../../'
        }
      } : 'vue-style-loader',
    ].concat(loaders)
    // }
  }

最后测试404问题解决，不知道还有没有其他问题