博客

能找到该文章也大概知道electron干啥用的吧所以直接以下操作

1.安装 yarn add electron –dev 和 yarn add nodemon –dev
2.在package.json 写main入口和启动脚本
"main":"main.js", "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"

"license": "MIT",
  "main":"./electron/main.js", //我在根目录建的新文件electron/main.js 注意路劲 //新添加
  "scripts": {
    "dev": "vite",
    "dev:prod": "vite --mode production",
    "build:prod": "vite build",
    "build:stage": "vite build --mode staging",
    "preview": "vite preview",
    "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"  //新添加
  },

3.新建 main.js (electron配置文件)

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
        // 窗口的大小
       // 窗口的大小
        //fullscreen: true   //全屏
         //frame: false,   	//让桌面应用没有边框，这样菜单栏也会消失
        //  width: 800,         //设置窗口宽高
        //  height: 600,
        //  icon: iconPath,     //应用运行时的标题栏图标
        //  minWidth: 300,     // 最小宽度
        //  minHeight: 500,    // 最小高度
        //  maxWidth: 300,    // 最大宽度
        //  maxHeight: 600,    // 最大高度
        // 进行对首选项的设置
		   show: false,
        webPreferences:{    
           // 定义预约加载的js
            preload: path.resolve(__dirname, './preload/index.js')
          }
          // 当页面加载完毕的时候在显示窗口
    win.on('ready-to-show', () => {
        win.show()
    })
    })
    // 窗口打开的数据
    win.loadURL('http://localhost') //链接
    // win.loadFile('index.html')//文件
// 打开发开工商
    win.webContents.openDevTools()
}
//关闭黄色警告
`process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';

app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

恢复上次关闭窗口的位置和大小

安装 npm i electron-win-state --dev
main.js

const { app, BrowserWindow } = require('electron')
const WinState = require('electron-win-state').default
const winState = new WinState({})



const createWindow = () => {
    const win = new BrowserWindow({
        ...winState.winOptions,
        // 窗口的大小
      // 窗口的大小
        //fullscreen: true   //全屏
         //frame: false,   	//让桌面应用没有边框，这样菜单栏也会消失
        //  width: 800,         //设置窗口宽高
        //  height: 600,
        //  icon: iconPath,     //应用运行时的标题栏图标
        //  minWidth: 300,     // 最小宽度
        //  minHeight: 500,    // 最小高度
        //  maxWidth: 300,    // 最大宽度
        //  maxHeight: 600,    // 最大高度
        // 进行对首选项的设置
        webPreferences:{    
                     //   preload: path.resolve(__dirname, './preload/index.js')

          }
    })
	winState.manage(win)

    // 窗口打开的页面
    win.loadURL('http://localhost') //链接
    // win.loadFile('index.html')//文件
// 打开发开工商
    win.webContents.openDevTools()
        winState.manage(win)

}

app.whenReady().then(()=> {
    createWindow()
})

添加菜单

创建 menu.js文件 之后 main.js引入 require('./menu') //注意路劲

const { Menu } = require("electron");
const menuTemplate = [
  {
    label:"文件", // 菜单名
    submenu:[ // 二级菜单
       {
        label:'新建',
        accelerator:'ctrl+n', // 快捷键
        click:()=>{ // 点击事件
          console.log("create file")
        }
      },
      {type: 'separator'}, // 分割线
      {
        label:'打开',
      },
      {
        label:'保存',
      }
    ],
  },
  {
    label:"编辑",
    submenu:[ 
       {
        label:'复制', 
        role:'copy', // 快捷键与系统冲突时可以使用role属性指定
        click:()=>{ 
          console.log("copy")
        }
      },
      {
        label:'粘贴',
        role:'paste',
        click:()=>{
          console.log("paste")
        }
      },
      {
        label:'保存',
      }
    ],
  },
]
const menuBuilder = Menu.buildFromTemplate(menuTemplate)
Menu.setApplicationMenu(menuBuilder)

打包

1.安装 yarn add electron-builder --dev 会安装在package.json文件下的devDependencies里
![在这里插入图片描述](https://img-blog.csdnimg.cn/78ef0721f23d4a17aec08cc02d9f20d9.png

2.package.json 添加

  "name": "electron-demo",
  "version": "1.0.0",
  "author": "your name",
  "description": "My Electron app",
 "main": "./electron/main.js", //注意 文件位置//新添加
  "scripts": {
    "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue",
    "electron-builder": "electron-builder"
  },
  "build": {
    "productName": "electron-demo",   // 安装包文件名
    "directories": {
      "output": "dist"  // 安装包生成目录
    },
    "nsis": {
      "oneClick": false,  // 是否一键安装
      "allowToChangeInstallationDirectory": true    // 允许用户选择安装目录
    },
    "mac": {
      "category": "your.app.category.type"
    },
    "win": {
      "icon": "build/icons/food.png",   // 安装包图标，必须为 256 * 256 像素图片
      "target": [
        {
          "target": "nsis"
        }
      ]
    }
  },

3.打包 yarn electron-builder

出现exe 可以点击安装 就可以了

修改electron图标

1…安装 yarn add electron-icon-builder
2.package.json添加

  "scripts": {
    "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"
  },
  "win": {
      "icon": "build/icons/11.ico",//注意目录 和文件名称
      "target": [
        {
          "target": "nsis"
        }
      ]
    }

3.运行 yarn electron:generate-icons 完成后 根目录自动生成build/icons文件 在里面放入ico/png图
注意: 图得需要256*256大小的 ,ico和png图都可已 已经试过了

官方回答:
Optional icon.ico (Windows app icon) or icon.png. Icon size should be at least 256x256.
needs to be placed in the buildResources directory (defaults to build). It is important to provide icon.ico (or icon.png), as otherwise the default Electron icon will be used.

翻译
'可选icon.ico（Windows应用程序图标）或icon.png。图标大小应至少为256x256。

需要放置在buildResources目录中（默认为build）。提供icon.ico（或icon.png）很重要，否则将使用默认的Electron图标。

4.打包 yarn electron-builder //根据自己的配置打包