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打包部署后字体图标丢失问题的更多相关文章
- Vue项目build打包部署到Tomcat后,刷新报404错误解决方案
问题描述: 一.更新依赖,并打包项目 cd /root/.jenkins/workspace/v-test;npm installcd /root/.jenkins/workspace/v-test; ...
- vue项目打包部署elementUI的字体图标丢失问题
自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...
- 解决django配合nginx部署后admin样式丢失
解决django配合nginx部署后admin样式丢失 1. 在项目的settings.py文件里添加以下内容: STATIC_URL = '/static/' STATICFILES_DIRS = ...
- vue iView 打包后 字体图标不显示
问题描述: 今天webpack打包后发现iView 字体图标不显示 解决方案: build/webpack.prod.conf.js 这个文件里面 module: { rules: utils.sty ...
- Vue通过build打包后 打开index.html页面是空白的
最近在build打包vue项目遇到了几个问题,如下: 1.npm run build打包项目之后,我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器,但最近发现直 ...
- vue之项目打包部署到服务器
这是今年的第一篇博客.整理一下vue如何从项目打包到部署服务器,给大家做下分享,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下. 第一步:这是很关键的一步.打开项 ...
- angular-cli ng build 打包完成后 打开文件显示空白
将index.html 里面的<base href="/"> 改为<base href="./"> 前面加一个 点 就好了,然后再次打包 ...
- vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎,找到了问题所在以及解决办法:main.js中的引入顺序决定 ...
- -webkit-line-clamp、-webkit-box-orient vue 打包部署后不起作用??
场景分析:实际开发中,文字描述过长,需要两行或三行显示缩略显示: 实现过程: 实现过程遇到的问题:打包到线上后发现并没有-webkit-box-orient属性,导致省略号并没有按预期展示: 解决方法 ...
随机推荐
- 周末畅谈 | 我是如何在硅谷获得年薪30万美金Offer的?
本文讲述了一位硅谷软件工程师的面试经验,他分享了他如何在硅谷拿到最终30万美金年薪的Offer,原文摘自:https://blog.usejournal.com/how-i-negotiated-a- ...
- C++ spdlog日志管理
[1]spdlog简介 spdlog是一个开源的.快速的.仅有头文件的基于C++11实现的一款C++专用日志管理库. [2]源码下载 下载地址:https://github.com/gabime/sp ...
- 【转帖】使用了 Service Mesh 后我还需要 API 网关吗?
使用了 Service Mesh 后我还需要 API 网关吗? https://www.kubernetes.org.cn/6762.html api gateway和istio 是不一样的 追求不一 ...
- 2019年春PAT甲级考试
这次考试不是很理想,一道题目没能做完. 自己原因差不多三条: 1.自己实力不够,准备时间也有点仓促,自己没能做到每道题目都有清晰的思路. 2.考试的心理素质不行,因为设备原因东奔西跑浪费了挺多时间,自 ...
- 面试准备 DOM
基本概念:Dom事件的级别 Dom0 级别 element.onclick=function() {} Dom1 没有制定事件相关的 Dom2 element.addEventListener(&q ...
- Spring(一)——IOC和DI的简单理解
Spring是一个IOC(DI)和AOP容器框架,并且是开源的. 1.IOC和DI 比较官方的说法: •IOC(Inversion of Control):其思想是反转资源获取的方向. 传统的资源查找 ...
- Linux ES集群服务配置说明
说明: ES官网不建议在root用户使用Elastic Server,因此ES集群配置均使用普通账户操作,新建账户 elastic. Linux版本为CentOS 7.3,ES版本为5.5.0. 一. ...
- header() 被用来发送自定义的 HTTP 报文
header() 被用来发送自定义的 HTTP 报文.关于HTTP报文的更多信息请参考» HTTP/1.1 specification. 请注意一点header()必须在任何实际输出之前调用,不管是普 ...
- SQL的技巧
衍生特征时, 统计每个类目id的用户的购买次数.金额, 用了下面语法, 发现效率很低. select UID , sum(if(item_level1_id='1', order_cnt, 0)) s ...
- Postgresql的导表
背景 前面已经介绍了常用的备份与恢复了,接下来介绍一下导表. 正文 很多情况,会有把数据导出的需求,轻重缓急总会有特别紧急的情况,但是又不是专业干db的人,还是记录下来,以防不时之需. 针对于导表,个 ...