weblog

Appearance

Electron桌面应用框架 ​

Electron Logo

1.简介 ​

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。通过将 Chromium 和 Node.js 结合到同一个运行时环境中，开发者可以使用 Web 技术创建原生应用程序。

主要特性：

  • 跨平台（Windows/macOS/Linux）
  • 使用熟悉的前端技术栈
  • 访问系统级 API（文件系统、系统托盘等）
  • 活跃的开发者社区

2.为什么选择 Electron？ ​

特性ElectronNW.jsQt
开发技术Web 技术Web 技术C++/QML
系统资源占用较高中低
学习曲线低中高
流行应用案例VSCodeWPS

4.学习网站 ​

5.基础使用 ​

1. 确保已安装 Node.js（>=16.x） ​
bash
node -v
npm -v
2. 创建项目 ​
bash
npm init -y
3. 安装 Electron ​
bash
npm install electron@latest --save-dev
4. 添加 .gitignore 文件 ​

模版地址 https://github.com/github/gitignore/blob/main/Node.gitignore

5. 添加 mini 文件 ​

默认mian文件 index.js

js
const { app, BrowserWindow } = require('electron')

// createWindow() 函数将您的页面加载到新的 BrowserWindow 实例中
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

// 当 Electron 完成初始化并准备创建浏览器窗口时，将调用此方法
app.whenReady().then(() => {
  createWindow()
})
6. 根目录中创建一个 index.html ​
html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
  </body>
</html>
7. 运行项目 ​
bash
npm run start

6.1.vue3+electron ​

1. 创建vu3项目 ​
bash
npm create vite@latest
2. 在根目录下新建一个 .npmrc文件 ​
bash
strict-ssl=false
registry=https://registry.npmmirror.com/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
# ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/

strict-ssl=false：这个设置表示在进行 SSL 连接时不强制验证证书的有效性。这在一些情况下可能会用于避免 SSL 证书验证失败的问题

registry=https://registry.npmmirror.com/：这是指定了 npm 的镜像源，用于下载 npm 包

electron_mirror=https://registry.npmmirror.com/-/binary/electron/：这个配置项指定了 Electron 包的镜像源，用于下载 Electron 框架相关的二进制文件

3. 安装electron ​
bash
npm install electron@latest --save-dev
4. 安装electron相关的插件 ​
bash
npm install -D electron-builder
npm install -D electron-devtools-installer
npm install -D vite-plugin-electron
5. 创建项目入口 ​

/src-electron/main.js

js
// src-electron/main.js
const { app, BrowserWindow } = require('electron')
const { join } = require('path')


// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

// 创建浏览器窗口时，调用这个函数。
const createWindow = () => {
    /**
     * 窗口设置
     */
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title:'窗口标题',
        // icon: join(__dirname, '../public/favicon.ico'), // 窗口图标和任务栏图标默认是electron 的logo
    })

    // win.loadURL('http://localhost:3000')
    // development模式
    if(process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    }else {
        win.loadFile(join(__dirname, '../dist/index.html'))
    }
}

// Electron 会在初始化后并准备
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})
6. 在vite.config.ts中配置vite-plugin-electron 插件入口 ​
js
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            // 主进程入口文件
            entry: './src-electron/main.js'
        })
    ],
    /*开发服务器选项*/
    server: {
        // 端口
        port: 3000,
    }
})
7. 配置package.json ​

在package.json 把"type": "module", 删除掉并且配置main字段

json
// main字段配置为 electron主进程文件路径
"main": "./src-electron/main.js",
8. 运行项目 ​
bash
npm run dev

6.2.打包 ​

1. package.json ,在"scripts"里面配置这个打包命令 ​
json
"electron:build": "vite build && electron-builder"
2. package.json , 配置 build ​
json
"build": {
  "productName": "ElectronDeskTopTool",
  "appId": "coolo.top",
  "copyright": "coolo © 2024",
  "compression": "maximum",
  "asar": true, 
  "directories": {
    "output": "release/"
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true,
    "perMachine": true,
    "deleteAppDataOnUninstall": true,
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "shortcutName": "ElectronDeskTopTool"
  },
  "win": {
    "icon": "./public/logo.ico",
    "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",
    "target": [
      {
        "target": "nsis"
      }
    ]
  },
  "mac": {
    "icon": "./public/logo.ico",
    "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
  },
  "linux": {
    "icon": "./public/logo.ico",
    "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
  }
}
3. 打包 ​
bash
npm run electron:build

打包后输出文件夹 /release

6.3.路由 ​

1.安装路由 ​
bash
npm install vue-router@4

2.其他配置和普通vue项目一样 ​

7.模版 ​

https://gitee.com/coolo/vue3electron.git

京ICP备2024093538号-1

自用笔记本