Webpack4-Vue 字体(图标)文件缺失的问题解决

现象

打包后启动项目发现iconfont字体文件缺失

打开控制台发现字体文件404错误

分析

打包正式包，一般需要抽离css文件，在webpack4使用mini-css-extract-plugin插件，webpack3使用extract-text-webpack-plugin

在webpack配置中

使用mini-css-extract-plugin配置css文件在./dist/static/css目录下

plugins: [
    new MiniCssExtractPlugin({
        filename: 'static/css/[name].css',
        ignoreOrder: true
    }),
    ...
]

使用url-loader抽取ttf等字体文件在 ./dist/static/fonts目录下

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

但是 mini-css-extract-plugin抽取的css文件中，依赖的字体文件，仍是url-loader配置的相对路径 url('/static/fonts/iconfont.hash.woff')，

然而css的路径已经被重新指定了，所以加载不了字体图标文件

 

解决

配置MiniCssExtractPlugin.loader，在css的依赖的路径前手动加上相对路径

...
{
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            css: [
               'vue-style-loader',
               {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../../' // 这会在css中的url()前都加上这个路径, 根据具体打包路径调整
                    }
               },
               {
                    loader: 'css-loader',
                    options: { sourceMap: true }
               },
               {
                    loader: 'postcss-loader',
                    options: { sourceMap: true }
               },

            ]
        }
    }
}
...

 

未加载问题，可能是file-loader版本和url-loader版本不匹配的问题，移步Webpack4 url-loader 字体图标变为方框，图标文件未加载_JA+的博客-CSDN博客

参考资料

1. vue-element-admin mini-css-extract-plugin （解决背景图片不显示问题）