element-ui Failed to decode downloaded font 字体文件显示方框 采坑记

2019-06-19 admin

问题描述

vue使用element-ui字体文件不显示,显示效果为方框

clipboard.png

警告信息

Failed to decode downloaded font: http://192.168.43.169:8092/static/css/static/fonts/element-icons.535877f.woff
OTS parsing error: invalid version tag

本地环境没问题,打包之后就会出现问题。锁定问题应该是配置文件的问题。查看配置文件:


//dev: 
assetsPublicPath: '/',

//build:
assetsPublicPath: './',

解决方案

  • 把build的assetsPublicPath改为"/";问题完美解决;

  • 在css中修改引用路径,不过太麻烦

    src: url(’…/fonts/sell-icon.eot?u0tu7l’) src: url(’…/fonts/sell-icon.eot?u0tu7l#iefix’) format(‘embedded-opentype’), url(’…/fonts/sell-icon.ttf?u0tu7l’) format(‘truetype’), url(’…/fonts/sell-icon.woff?u0tu7l’) format(‘woff’), url(’…/fonts/sell-icon.svg?u0tu7l#sell-icon’) format(‘svg’)

关于vue-cli中assetsSubDirectory 和 assetsPublicPath的区别

基本的意义

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',

  • index: 模板
  • assetRoot: 打包后文件要存放的路径
  • assetsSubDirectory: 除了 index.html 之外的静态资源要存放的路径,
  • assetsPublicPath: 代表打包后,index.html里面引用资源的的相对地址

配置打包结果

index: path.resolve(__dirname, '../dist/index.html'),// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: './assets/',
assetsPublicPath: './hello/',

打包后为
<script type="text/javascript" src="./hello/assets/js/manifest.js"></script>
<script type="text/javascript" src="./hello/assets/js/vendor.js"></script>
<script type="text/javascript" src="./hello/assets/js/app.js"></script>

综上理解

assetsRoot : 在当前目录的上一级 的 dist目录下输出资源文件
assetsSubDirectory: 把所有的静态资源打包到 dist下的 assets文件夹下
assetsPublicPath :代表生成的index.html文件,里面引入资源时,路径前面要加上 ./hello/,也就是assetsPublicPath的值

[转载]原文链接:https://segmentfault.com/a/1190000019511585

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67646.html

文章标题:element-ui Failed to decode downloaded font 字体文件显示方框 采坑记

相关文章
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
element动态表单验证prop用法
基于Vue的Element.js的Form组件中,提供了一个动态增减表单的验证逻辑,这在项目中的提供了很大帮助。 但在实际写代码过程中,会遇到很多的坑,特别是动态添加验证规则时,prop属性不知道怎么用。 1、el-form标签的model...
2018-06-27
bootstrapValidator.min.js表单验证插件
本文实例为大家分享了bootstrapValidator.min.js表单验证的具体代码,供大家参考,具体内容如下 注意:下载后全选复制并粘贴到新建js文件名为bootstrapValidator.min.js下即可。 测试代码: &lt;...
2017-03-17
Bootstrap显示与隐藏简单实现代码
本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta http...
2017-03-14
自己参考两个仓库撸的通用的vue2.0+elementUI+多页面模板
A modern Vue.js multiple pages cli which uses Vue 2, Webpack3, and Element-UI Features Vue2 Webpack3 ElementUI Eslint(e...
2018-01-12
使用 Protocol Buffers 代替 JSON 的五个原因
在 Ruby 和 Rails 开发者中,面向服务 (Service-Oriented) 架构有一个当之无愧的名声,它是一个缓解程序规模恶性增长的一个强有力的途径,可在大量应用程序中提取关注点。这些新生小巧的服务通常继续使用 Rails 或 ...
2016-01-13
nodejs搭建本地服务器并访问文件的方法
安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容。新建server.js作为node开启的入口: $ cd f:&...
2017-03-13
Element el-upload上传组件详解
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件。 基本用法 代码: &lt;el-upload :action=&quot;uploadActionUrl&quot;&...
2018-03-18
jscript读写二进制文件的方法
本文实例讲述了jscript读写二进制文件的方法。分享给大家供大家参考。具体实现方法如下: var bin = new Array(256); for(var i=0;i&lt;256;i++){ bin[i]=String.fromC...
2017-03-22
javascript异步文件上传(兼容IE8+)
在非html5的情况下是无法用ajax把文件推送到后端的,只能通过form表单提交。但是form表单提交后浏览器会根据响应头与状态码对当前页面进行渲染、下载或跳转等行为,返回text、html、json等类型的内容时浏览器会对当前页面进行渲...
2017-04-05
回到顶部