详解Vue+elementUIbuild打包部署后字体图标丢失问题_vue打包后element图标没有了 - CSDN文库

83 浏览量更新于2023-05-11 评论收藏 43KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详解详解Vue+elementUI build打包部署后字体图标丢失问题打包部署后字体图标丢失问题

主要介绍了详解Vue+elementUI 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打包部署字

体图标丢失内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38639747

粉丝: 7
资源: 902

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈