vue-cli2项目webpack3 和webpack4环境中：Element-UI在vue项目中，打包build后字体、图标丢失（亲测可解决）

最新推荐文章于 2023-06-16 15:37:47 发布

原创最新推荐文章于 2023-06-16 15:37:47 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

Element-UI 专栏收录该内容

12 篇文章

订阅专栏

在vue-cli2的webpack3和webpack4项目中，使用Element-UI时遇到打包后字体图标丢失的问题。原因是woff和ttf字体文件路径错误，导致404错误。解决方法包括在webpack3中修改webpack.base.conf.js的module配置和utils.js的publicPath，而在webpack4中只需调整webpack.base.conf.js中MiniCssExtractPlugin的设置。

vue-cli2项目webpack3 和webpack4环境中：webpack3 和webpack4中：Element-UI在vue项目中，打包build后字体、图标丢失

应用场景：

F12报错提示：

问题原因：

（1）查看 /build/webpack.base.conf.js 文件可以发现，woff 或 ttf 这些字体会经由 url-loader 处理后在 static/fonts 目录下生成相应的文件。

（2）也就是说实际应该通过 /static/fonts/** 路径来获取字体图标，而实际却是请求 /static/css/static/fonts/**，自然报 404 错误。

解决办法：

此处我的过程是vue-cli2.X项目，vue-cli3类似，只是在vue.config.js文件中修改即可。

一、webpack3.x中：

1、webpack module配置：(build目录下webpack.base.conf.js)

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

2、webpack utils.js 修改：（build目录下utils.js）中添加 publicPath: '../../'

if (options.extract) {
    return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'   //添加这一句
    })
} else {
    return ['vue-style-loader'].concat(loaders)
}

二、webpack 4.X中

webpack4.X中已经不用了ExtractTextPlugin，用MiniCssExtractPlugin进行打包，只需要再build/webpack.base.conf.js文件中：

module:{
　　rules: [　
　　　　...(config.dev.useEslint ? [createLintingRule()] : []),
　　　　
　　　　{
　　　　　　test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
　　　　　　loader: 'url-loader',
　　　　　　options: {
　　　　　　　　limit: 10000,
　　　　　　　　publicPath: '../../',   //此处加上路径配置即可
　　　　　　　　name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
　　　　　　}
　　　　}
　　]　　
}