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

短命女 2021-07-24 23:20 442阅读 0赞

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

**应用场景：**

![20191115124714129.png][]

F12报错提示：

![20191115124837760.png][]

![format_png][]

**问题原因：**

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

![20191115125738509.png][]

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

![20191115125718125.png][]

**解决办法：**

**此处我的过程是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]')
    　　　　　　}
    　　　　}
    　　]　　
    }

[20191115124714129.png]: /images/20210724/99537160cb3647fdb3b449d90b6dfac7.png
[20191115124837760.png]: /images/20210724/074ce44a5e464dd59367b26cefcf4d10.png
[format_png]: /images/20210724/537d9cf6d84848db8dd8defe159bd9da.png
[20191115125738509.png]: /images/20210724/4cde10f5f91f485f9e57ab02146c8a81.png
[20191115125718125.png]: /images/20210724/f0c119e130da4d6a91be2be518e581a3.png