vue打包后出现的bug http://localhost:3000/static/css/static/fonts/mui-icons-extra.683f395.ttf 404

原创于 2019-06-10 16:50:10 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了解决在使用Webpack进行项目打包时遇到的ttf字体文件加载失败问题的方法。通过在webpack.base.config.js配置文件中正确设置loader，可以有效处理不同类型的静态资源，确保项目正常运行。

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

ERROR in ./static/mui/fonts/mui.ttf 1:0
Module parse failed: Unexpected character ‘’ (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
@ ./static/mui/css/mui.css (./node_modules/css-loader!./static/mui/css/mui.css) 7:103162-103189
@ ./static/mui/css/mui.css
@ ./src/index.js
通过webpack打包是包上述错误。解决方案：在配置文件webpack.base.config.js中添加ttf结尾的文件依赖的loader


module:{
    rules:[
        {
            test:/\.css$/,
            use:[
                'style-loader',
                'css-loader'
            ]
        },
        {
            test:/.(png|gif|jpg|svg|ttf)$/,
            use:[
                'file-loader'
            ]
        }
]

}