一、build文件下utils.js下增加

publicPath:'../../'

二、

同样的代码环境,用yarn来安装依赖后启动运行正常,而采用npm安装依赖则有类似问题。当然,这个和yarn或者npm没有关系,肯定是环境配置的问题。经过对比发现,用yarn安装依赖后,运行的页面加载的字体文件并不是一个http请求,而是把字体文件打包成了Base64编码的文件直接嵌入到了页面当中,而采用npm搭建的环境,则发起了一个http请求,并指向了错误的地址。

这样以来就初步定位了问题,排查webpack.base.conf.js,对应的字体模块加载配置

由于设置了limit:10000,即文件大于10KB就会直接发起http请求的方式去加载依赖,而小于10KB的文件则直接通过Base64打包嵌入到页面当中,调整该配置为100000,再次打包测试,字体图标显示正常了,初步确定,问题就在这里。虽然问题定位了,但是原因还没找到,由于采用的webpack配置是同一份,不可能出现yarn和npm安装依赖导致配置的改变,再次分析发现,npm安装搭建的环境,请求的woff文件和ttf文件,显著变大了,分别为55956B和28200B,而通过yarn搭建的环境请求的对应字体文件只有11040B和6164B,文件大小明显不同,差异巨大。

vue 升级element-ui woff文件404的更多相关文章

  1. vue+ elementUI 打包发布到服务器后,element-icons.woff文件404

    vue项目打包部署到服务器,静态资源文件404 js文件404问题        原因:打包的项目静态资源的路径需要设置为绝对路径.如果是相对路径会出错 解决办法:修改config/index.js文 ...

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  3. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

  4. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  5. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  6. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  7. 第五十三篇:Vue安装Element ui

    好家伙,之前写的一篇过时了,用不了了,更新一波 (已新建一个vue项目) 1. 在项目目录下执行:npm i element-ui -S 2. 在main.js中写入 import ElementUI ...

  8. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  9. Vue.js + Element.ui 从搭建环境到打包部署

    一.搭建环境 由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍. 安装好后可以打 ...

随机推荐

  1. C语言如何实现继承及容器

    继承的概念 继承是面向对象软件技术当中的一个概念,与多态.封装共为面向对象的三个基本特征.继承可以使得子类具有父类的属性和方法或者重新定义,追加属性和方法. 面向对象中的重要概念就是类,在我们熟知的编 ...

  2. 前端基础-HTML(1)

    1.浏览器: 1.1 浏览器内核: 渲染引擎和JS引擎 渲染引擎:负责页面内容的在(html,xml,图像等).整理讯息(加入css等),以及计算网页的显示方式,然后输出至显示器后者打印机 JS引擎: ...

  3. PL/SQL 九九乘法表

    和shell脚本九九乘法表一样,只是语法有少出入 先看看效果图先: 利用for循环: SET SERVEROUTPUT ON DECLARE x INT :=1; y INT :=1; BEGIN F ...

  4. 工程师泄露5G核心技术文档 被判有期徒刑三年缓刑四年

    2002 年至 2017 年 1 月,黄某瑜就职于中兴通讯公司,担任过射频工程师.无线架构师等职务.2008 年 4 月至 2016 年 10 月,王某就职于中兴通讯公司西安研究所,担任过 RRU 部 ...

  5. 【DNS域名解析命令】 dig

    dig - DNS lookup utility dig 命令主要用来从 DNS 域名服务器查询主机地址信息. Dig (domain information groper 域名信息搜索)是一个灵活的 ...

  6. mybatis if test标签的使用

    2019独角兽企业重金招聘Python工程师标准>>> 在使用mybatis 有时候需要进行判断的. 而我们知道mybatis获取值有两种方式 #{}和${}的. 那么,在mybat ...

  7. iOS开发·runtime原理与实践: 消息转发篇(Message Forwarding) (消息机制,方法未实现+API不兼容奔溃,模拟多继承)...

    本文Demo传送门: MessageForwardingDemo 摘要:编程,只了解原理不行,必须实战才能知道应用场景.本系列尝试阐述runtime相关理论的同时介绍一些实战场景,而本文则是本系列的消 ...

  8. 代码,绘画,设计常用的颜色名称-16进制HEX编码-RGB编码 对照一览表

    排列方式,英文名称的字典序 颜色名 HEX16进制编码 RGB编码 AliceBlue F0F8FF 240,248,255 AntiqueWhite FAEBD7 250,235,215 Aqua ...

  9. CentOS7 安装boost

    (1)到这个网址www.boost.org下载相应的代码包,我下载的是目前最新的版本boost_1_59_0.tar.bz2 (2)进入目录执行解压操作:tar -jxvf boost_1_59_0. ...

  10. SecureCRT怎么将本级文件上传到CentOS

    进入到想要放文件的路径,不然会默认放在当前路径下: 输入 rz -------------------------------------------------------------------- ...