jjzjj

[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题

1999笃行 2024-01-06 原文

软件版本
"vue": "^2.6.14"
"electron": "^13.0.0"
node v14.16.0
"element-ui": "^2.15.8"

问题描述

  • iconfont.cn站点的字体图标下载到本地，采用Font class的方式调用（如：<span class="icon iconfont icon-24gl-printer">），在开发预览环境中调用正常；可是打包后不显示字体图标。
  • element-ui也遇到同样的问题。
  • 经过打包后开启的控制台可以看到引入字体文件的路径如下图红框所示(app://fonts/xxx.ttf)


（打包后我直接打开的是免安装的软件）由此可见问题的原因很明确了：引用地址错误（下图 是css的正确引用地址）。

原因明确，但是本人着实不懂 打包的地址配置，截止编写此文，element-ui的字体图标没有得到解决，以至于下拉框等图标还是不显示。能解决此问题的朋友欢迎留言，或在网络分享你的详细经验（已解决：如下）

网友给到的优秀解决方法
@安歌

在vue.config.js中设置 customFileProtocol字段：

pluginOptions: {
	electronBuilder: {
		customFileProtocol: "./"
	}
}

至此，已完全解决问题了，下文可以不用阅读了！
至此，已完全解决问题了，下文可以不用阅读了！
至此，已完全解决问题了，下文可以不用阅读了！

element-ui打包不显示的问题的解决方法：
通过多方查找资料最后又回到了Vue CLI，解决的核心在于此文档URL 转换规则 ，根据文档我的理解是因为打包，element-ui的样式没有当做静态资源引用。下面是我的解决方法

  1. 在项目的node_modules目录下找到element的CSS样式目录；从element-ui安装文档中可知目录import 'element-ui/lib/theme-chalk/index.css';，直接拷贝theme-chalk目录下的所有文件到项目的public目录下；（都明白路径名肯定是可以自己随意的，只要是在public目录下）

  2. 找到新拷贝过来的样式index.css文件，且修改样式地址：如下图，修改字体文件路径

  3. 在项目的main.js引入的import 'element-ui/lib/theme-chalk/index.css'就不需要了；在public/index.html增加css引用代码<link rel="stylesheet" href="<%= BASE_URL %>element-ui/theme-chalk/index.css">如下

    <!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--加此行-->
    <link rel="stylesheet" href="<%= BASE_URL %>element-ui/theme-chalk/index.css">
    <!--加此行end-->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

    这样就容易理解了，结合vue cli的资源文档

  4. 阿里的字体iconfont的显示问题肯定也可以用同样方法解决，不再重述。以下的解决方法同样可用于iconfont继续保留。

解决后的截图：

我的解决方案

main.js文件如下引入

// import './assets/alifonts/iconfont.css';//此为css方式引入，此处不用 仅作为和下对比
import './assets/alifonts/iconfont.js';

App.vue 写css.icon类；（该类也不一定写在App.vue页，根据需求）

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

在vue页面中使用

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxxx"></use>
</svg>

上述的步骤，在 iconfont.cn官网的文档->symbol 引用有详细描述。我的引用是将远程下载到本地而已。

至此iconfont的字体图标问题得到了解决。

electron-builderelement-uispanclasstokenvue.jselectronjavascript

有关[已解决]electron-builder vue 打包后iconfont/element-ui字体图标不显示问题的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  3. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  4. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  5. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  6. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  7. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  8. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  9. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  10. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

随机推荐