添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
害羞的针织衫  ·  Qt Virtual ...·  7 月前    · 
大鼻子的柿子  ·  6. Validation, Data ...·  7 月前    · 
干练的罐头  ·  bash - rsync rename ...·  1 年前    · 

直到今天 Electron-vue 项目终于到打包联调的的最后阶段了,在本地调试没有问题的情况下,需要进行最后一步的模拟真实环境下的调试了。

默认打包将会使用默认的图标,所以打包之后的项目需要做以下几点修改

  1. 静态资源路径的修改
  2. 打包后窗体图标的修改
  3. 安装之后的图标修改

将会在下面的配置修改中统一处理

2.配置修改

2.1 静态资源路径的修改

由于我需要去 调度/执行 另外一个 exe 文件,所以我需要将 开发环境 生产环境 作区分,所以需要配置不同环境下的 exe 文件(暂时称为服务端exe)的路径。

服务端 exe 在开发环境下,我是放到主进程文件 src/main/index.js 统计目录中,以便测试之用。

开发环境下

// 开发环境
let cmdStr = `${__dirname}/main.exe`

而实际的生产环境中需要将main.exe文件放到build打包后的可执行文件目录的同级目录,比如我执行build命令之后会在会在build文件夹下生成这种目录:
在这里插入图片描述
而生成的exe文件会在win-unpackaged目录下,然后将服务端main.exe文件copy到该目录下即可,然后将main/index.js中的路径修改为生产环境下的路径

// 生产环境 打包后,exe文件放入到打包后可执行文件同一目录
let cmdStr = './main.exe'

这样在启动客户端的时候就会把服务端的exe拉起来,即建立子进程。

2.2 打包后窗体图标的修改

如果你不做修改,那么默认是系统的图标即electron-vue自带的图标,所以一般产品发布会修改为自己的产品图标或者logo.

2.2.1 制作windows下的ico图标

首先如果你需要替换成自己产品的图标,那么需要符合规范的ico格式图标(我还没有试其他格式的行不行,很多产品或者公司都会使用ico格式的文件),所以在这里主要演示ico的文件怎么制作。

如果你不是用自己的图标,默认会使用框架自带的图标,build会出现下面的提示:

default Electron icon is used reason=application icon is not set

在以往的项目中,发现直接把.png的改为.ico的也能正常使用,build也能通过,而现在尝试了一下直接把.png的改为.ico,发现不行,会出现下面这种错误:

Reserved header is not 0 or image type is not icon for 'D' Fatal error: Unab

所以,我们需要通过正规的工具去修改成ico文件
官网:
https://icofx.ro/

下载之后直接安装,然后直接点击Open an existing file
在这里插入图片描述
选择256x256规格的,然后ctrl+s保存一下就可以了
在这里插入图片描述
你也可以通过Image->Create Windows Icon From Image...导入图片去生成ico格式的文件。
在这里插入图片描述

2.2.2 修改package.json中为build配置

build下的win,将icon改为你图标所在的目录,默认的配置是build/icons/icon.ico,但是发现在实际的electron-vue项目中,并没有这种目录。所以需要你手动修改为你的ico的具体文件目录。

"build": {
    "productName": "Dynarose",
    "appId": "com.app.Dynarose",
    "directories": {
      "output": "build"
    "files": [
      "dist/electron/**/*"
    "dmg": {
      "contents": [
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
          "x": 130,
          "y": 150,
          "type": "file"
    "mac": {
      "icon": "icon.icns"
    "win": {
      "icon": "icon.ico"
    "linux": {
      "icon": "icons"

2.2.3 桌面图标修改为自定义图标

之前使用的Inno Setup打包的安装文件,根据前面的教程,你可以直接选择生成的图标即可。

1.前言直到今天Electron-vue项目终于到打包联调的的最后阶段了,在本地调试没有问题的情况下,需要进行最后一步的模拟真实环境下的调试了。默认打包将会使用默认的图标,所以打包之后的项目需要做以下几点修改静态资源路径的修改打包后窗体图标的修改安装之后的图标修改将会在下面的配置修改中统一处理2.配置修改2.1 静态资源路径的修改由于我需要去调度/执行另外一个exe文件,所以我需要将开发环境和生产环境作区分,所以需要配置不同环境下的exe文件(暂时称为服务端exe)的路径。服务端
electron-vue 图标 提示:图标包括:启动项目时桌面主题图标窗口左上角图标,菜单栏图标,系统托盘图标,打包安装图标、开始菜单图标、快捷方式图标等。 文章目录electron-vue 图标1. 启动项目默认图标窗口左上角图标2. 菜单栏图标3. 系统托盘图标4. 打包安装包图标5. 开始菜单图标和快捷方式图标总结 1. 启动项目默认图标窗口左上角图标 这两个图标均由 mainWindow 的 icon 属性决定: 代码如下(示例): mainWindow = new BrowserWi
Building app with electron-builder: • electron-builder version=22.14.5 os=10.0.19042 • description is missed in the package.json appPackageFile=E:\h-world\hscmweb-diagrams\dist_electron\bundled\package.json • author is missed in the package.
最近公司研发了一套内部使用的办公系统包括移动端+PC端,系统是基于javaWeb开发的,PC端要求制作一个可安装文件以方便员工使用(url路径记着有些麻烦), 于是想到了electron。由于之前用过所以window的exe包很容易就生成了,到了mac时候出现了一些问题........所以记录下过程. 简单介绍下: Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了,想试试新功能 工作中用的 umi+electron 项目大了,启动速度并不理想; 用 vite 试试,算一个储备方案 ^_^ Command npm run dev npm run build 如果只需要最基础的集成 Demo 请使用 或 分支 Note 踩坑记 import { write } from 'fs' 的这种形式会被 vite 编译成 /@modules/fs?import const { write } = require('fs') 这种形式就能用了 :winking_face: const {
首先,我是把软件安装在手机上测试的,不是在模拟器上。当我想更改应用程序图标时,我首先按以下步骤操作了: 在res/drawable-hdpi或res/drawable-ldpi或res/drawable-mdpi目录下,加下你要显示的图片,最好后缀是为.png的,然后修改AndroidManifest.xml文件,里面有这样一行代码<application android:icon="@drawable/icon" android:label="@string/app_name">,把它改为<application android:icon="@drawable/***" android:label="@string/app_name">(“***”表示你放入的图片的名,比如你放入app.png,那么就是android:icon="@drawable/app") 记得在AndroidManifest.xml文件中把所有activity中的icon的属性都改为你的图片@drawable/***。 然后发现程序运行页面的图标更改成功了,但是桌面上的应用程序图标还是原来的。 原因:手机中之前安装过这个软件,在手机中存有原来这个软件的图标,当我们换图标时,它直接调用原来版本的软件的图标。 解决办法:使用杀毒软件或者手机管家等清理手机垃圾缓存等即可解决。
修改打包后的应用名称和修改应用icon // 修改应用名称:在package.json中修改productName的名称即可`在这里插入代码片` "productName": '应用名称' // 修改应用icon:在.electron-vue中的build.config.js中修改icon的地址即可 icon: path.join(__dirname, '../build/icons/xxx') github_26990911: 因为你的message是在js加载时就决定了,所以你只要包装成function即可,比如官方的例子:https://github.com/alibaba/react-intl-universal/blob/master/packages/react-intl-universal/examples/browser-example/core/util.ts#L4 这个是demo效果:https://fe-tool.com/react-intl-universal 【Eelectron-vue】构建桌面应用(20)-electron的退出quit和exit 曾经的你d: https://blog.csdn.net/m0_52539553/article/details/127069490?spm=1001.2014.3001.5502