Vue ElementUI build打包部署后，字体图标丢失怎么办？

本文共计239个文字，预计阅读时间需要1分钟。

错误描述：Vue + elementUI build打包部署后字体图标丢失，控制台显示文件element-icons.woff和element-icons.ttf文件404错误。

错误表现：控制台报错截图 + DOM渲染展示

解决方法：webpack module配置

（build目录）

错误描述：

Vue+elementUI build打包部署后字体图标丢失，控制台显示文件element-icons.woff和element-icons.ttf文件404

错误展现：

控制台报错截图

dom渲染展示

解决方法：

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]') } } ] },

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) }

处理结果：

图标显示出来了

到此这篇关于详解Vue+elementUI build打包部署后字体图标丢失问题的文章就介绍到这了,更多相关element build打包部署字体图标丢失内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！