Electron快速上手

Electron

目录

简介

打包简单的html/css/javascript项目

打包Vue2项目

打包Vue3项目


简介

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 ChromiumNode.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux------不需要本地开发 经验。

官方网站:Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

官方教程:创建您的第一个应用程序 | Electron

打包简单的html/css/javascript项目

1.首先需要把当前项目交给npm管理,已经是npm项目就不用管!

bash 复制代码
npm init

2.修改项目的package.json文件,main表示入口文件,scripts中的start表示electron的运行脚本,packagerConfig中的name和icon分别表示应用名称和应用图标所在位置(./icon.ico表示在项目当前目录下有一个icon.ico的图标文件)

PNG转ICO格式网站:https://www.aconvert.com/cn/icon/png-to-ico/,转换成256x256尺寸,小了用不了。

config.forge具体有那些配置项见:Overview - Electron Forge

java 复制代码
{
  "name": "你的项目名称",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT",
  "config": {
    "forge": {
      "packagerConfig": {
        "name": "你的应用名称",
        "icon": "./icon.ico"
      }
    }
  }  
}

3.在项目中运行以下命令安装electron

bash 复制代码
npm install electron --save-dev

4.1创建main.js入口文件,添加以下内容(最简单入口文件)

javascript 复制代码
const { app, BrowserWindow } = require('electron/main')
​
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })
​
  win.loadFile('index.html')
}
​
app.whenReady().then(() => {
  createWindow()
​
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})
​
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

4.2创建main.js入口文件,添加以下内容(支持设备访问的入口文件)

javascript 复制代码
const { app, BrowserWindow } = require('electron/main')

function createWindow () {
  const mainWindow = new BrowserWindow({
     width:1920,
     height:1080,
  })
  
  //去掉菜单
  mainWindow.setMenu(null);

  mainWindow.webContents.session.on('select-hid-device', (event, details, callback) => {
    // Add events to handle devices being added or removed before the callback on
    // `select-hid-device` is called.
    mainWindow.webContents.session.on('hid-device-added', (event, device) => {
      console.log('hid-device-added FIRED WITH', device)
      // Optionally update details.deviceList
    })

    mainWindow.webContents.session.on('hid-device-removed', (event, device) => {
      console.log('hid-device-removed FIRED WITH', device)
      // Optionally update details.deviceList
    })

    event.preventDefault()
    if (details.deviceList && details.deviceList.length > 0) {
      callback(details.deviceList[0].deviceId)
    }
  })

  mainWindow.webContents.session.setPermissionCheckHandler((webContents, permission, requestingOrigin, details) => {
    if (permission === 'hid' && details.securityOrigin === 'file:///') {
      return true
    }
  })

  mainWindow.webContents.session.setDevicePermissionHandler((details) => {
    if (details.deviceType === 'hid' && details.origin === 'file://') {
      return true
    }
  })

  mainWindow.loadFile('index.html')
}

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

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

5.启动Electron

bash 复制代码
npm start

6.在项目中安装Electron Forge,是一个处理 Electron 应用程序打包与分发的一体化工具

官方教程:打包您的应用程序 | Electron

bash 复制代码
npm install --save-dev @electron-forge/cli

7..在package.json文件中的script中添加以下内容

java 复制代码
//...
"scripts": {
  "package": "electron-forge package",
  "make": "electron-forge make"
},
//...

8.制作一个x64架构、win64平台的软件

制作别的别的架构、别的平台的配置见:CLI - Electron Forge

bash 复制代码
npm start make ----arch x64 --platform win64

9.打包成windows系统可执行文件

bash 复制代码
npm run package

10.打包完成会在当前目录下生成一个out目录,可以打开对应的.exe文件

打包Vue2项目

1.创建Vue2项目,选择vue2版本进行创建,已有vue2则不用创建(package.json文件的script中没有"serve": "vue-cli-service serve"和 "build": "vue-cli-service build"的用不了)

bash 复制代码
#安装vue-cli
npm install -g @vue/cli
#如果想卸载之前版本
npm uninstall vue-cli -g
bash 复制代码
vue create vue2_project

2.添加electron-builder打包工具

配置electron镜像地址

bash 复制代码
npm config set registry http://registry.npm.taobao.org/
npm config set electron_mirror="https://npm.taobao.org/mirrors/electron/"
npm config set electron_builder_binaries_mirror="http://npm.taobao.org/mirrors/electron-builder-binaries/"
bash 复制代码
vue add electron-builder

3.项目中如果设置跨域proxy,需要去除,且页面中axios需要使用完全路径

javascript 复制代码
module.exports = {
  // 开发环境时使用proxy,生产环境即electron打包需要注释掉proxy
  // 同时页面中axios使用完全路径
  // devServer: {
  //   proxy: {
  //     "/api": {
  //       target: "http://localhost:8080/api",
  //       changeOrigin: true,
  //       rewrite: path => path.replace(/^\/api/, "")
  //     }
  //   }
  // }
}

4.进行打包

bash 复制代码
npm run electron:build

5.electron-builder打包后跨域访问失效问题的解决

  1. 修改axios的请求地址为完整url地址

  2. vue.config.js中不使用proxy

  3. electron主启动类(目前是background.ts)中关闭web权限检查

javascript 复制代码
async function createWindow() {
  const win = new BrowserWindow({
    ...
    webPreferences: {
      ...
      //关闭web权限检查,允许跨域
      webSecurity: false
    }
  })
}

6.设置应用图标

需要256*256,格式为ico,注意,不能采用直接修改后缀名的方式,需要使用专门的网站转换

vue.config.js中设置

bash 复制代码
module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        win: {
          icon: 'src/assets/logo.ico'
        }
      }
    }
  }
}

7.打包完成后会在项目目录中生成一个dist_electron目录,里面就是打包好的文件

打包Vue3项目

1.创建Vue3项目,已有则不用创建

bash 复制代码
npm create vue@latest

2.安装打包工具,依次安装!

bash 复制代码
npm i electron -D --force #electron核心模块
npm i electron-builder -D --force #打包工具
npm i concurrently -D --force  #热加载
npm i wait-on -D --force #热加载

3.编写electron配置文件,在项目根目录下创建一个electron目录用于保存electron配置文件,在electron目录中创建electron的入口文件main.js文件与preload.js 文件

main.js

javascript 复制代码
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1300,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  
  if (!app.isPackaged) {
     mainWindow.loadURL("http://localhost:8888/");
   } else {
     mainWindow.loadFile("./dist/index.html");
  }

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
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()
})

// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成几个文件,然后用 require 导入。

preload.js

javascript 复制代码
// All the Node.js APIs are available in the preload process.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

4.修改package.json,把type配置项删除,添加main配置项并设置为electron的入口文件,start用于启动electron项目端口号跟vite.config.js配置保持一致,exe-dev用于热更新适用于开发阶段,exe-build用于打包可执行文件

java 复制代码
{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "main": "electron/main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "wait-on tcp:8888 && electron .",
    "exe-dev": "concurrently -k \"npm run dev\" \"npm run start\"",
    "exe-build": "vite build & electron-builder --config electron.config.json"
  },
  "dependencies": {
    "vue": "^3.3.11",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.2",
    "concurrently": "^8.2.2",
    "electron": "^28.1.1",
    "electron-builder": "^24.9.1",
    "vite": "^5.0.10",
    "wait-on": "^7.2.0"
  }
}

5.修改vite.config.js文件,将路径为相对路径,配置端口号及其他参数

javascript 复制代码
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  base: './',
  server: {
    port: 8888,
    cors: true, // 允许跨域
    hmr: true, // 开启热更新
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

6.在项目根目录下创建electron.config.json,用于打包配置,files表示打包的文件,productName表示打包出来后可执行文件的名称,icon表示打包出来后可执行文件的图标"./icon.ico"表示在项目当前目录下有一个icon.ico的图标文件

PNG转ICO格式网站:PNG转ICO - 在线转换图标文件,转换成256x256尺寸,小了用不了。

javascript 复制代码
{
  "files": ["electron/main.js", "electron/preload.js", "./dist"],
  "productName": "vue_project",
  "icon": "./icon.ico"
}

7.运行命令完成打包,找到项目根目录下的dish目录,dish目录中的win-unpacked就是打包完成的相关文件,找到.exe结尾的文件运行就可以了!

bash 复制代码
npm run exe-build

8.开发阶段可使用以下命令启动项目

bash 复制代码
npm run exe-dev

还有一种更简单的方式,详情见:快速开始 | electron-vite,是由vite团队出品的,可以自己研究研究!

相关推荐
gqkmiss20 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃26 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰30 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye37 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm39 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You2 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js