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

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

//在vue.config.js中设置 customFileProtocol字段：
// 千万，千万不要复制代码去覆盖了你的vue.config.js 里的原码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	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的字体图标问题得到了解决。
在这里插入图片描述

# vue.js # electron # javascript
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区