Electron快速上手
Electron
目录
简介
打包简单的html/css/javascript项目
打包Vue2项目
打包Vue3项目
简介
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
官方网站：Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron
官方教程：创建您的第一个应用程序 | Electron
打包简单的html/css/javascript项目
1.首先需要把当前项目交给npm管理，已经是npm项目就不用管！
npm init2.修改项目的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
{
"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
npm install electron --save-dev4.1创建main.js入口文件，添加以下内容（最简单入口文件）
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入口文件，添加以下内容（支持设备访问的入口文件）
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
npm start6.在项目中安装Electron Forge，是一个处理 Electron 应用程序打包与分发的一体化工具
官方教程：打包您的应用程序 | Electron
npm install --save-dev @electron-forge/cli7..在package.json文件中的script中添加以下内容
//...
"scripts": {
"package": "electron-forge package",
"make": "electron-forge make"
},
//...8.制作一个x64架构、win64平台的软件
制作别的别的架构、别的平台的配置见：CLI - Electron Forge
npm start make ----arch x64 --platform win649.打包成windows系统可执行文件
npm run package10.打包完成会在当前目录下生成一个out目录，可以打开对应的.exe文件
打包Vue2项目
1.创建Vue2项目，选择vue2版本进行创建，已有vue2则不用创建（package.json文件的script中没有"serve": "vue-cli-service serve"和 "build": "vue-cli-service build"的用不了）
#安装vue-cli
npm install -g @vue/cli
#如果想卸载之前版本
npm uninstall vue-cli -gvue create vue2_project2.添加electron-builder打包工具
配置electron镜像地址
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/"vue add electron-builder3.项目中如果设置跨域proxy，需要去除，且页面中axios需要使用完全路径
module.exports = {
// 开发环境时使用proxy,生产环境即electron打包需要注释掉proxy
// 同时页面中axios使用完全路径
// devServer: {
// proxy: {
// "/api": {
// target: "http://localhost:8080/api",
// changeOrigin: true,
// rewrite: path => path.replace(/^\/api/, "")
// }
// }
// }
}4.进行打包
npm run electron:build5.electron-builder打包后跨域访问失效问题的解决
-
修改axios的请求地址为完整url地址
-
vue.config.js中不使用proxy
-
在
electron主启动类（目前是background.ts）中关闭web权限检查
async function createWindow() {
const win = new BrowserWindow({
...
webPreferences: {
...
//关闭web权限检查，允许跨域
webSecurity: false
}
})
}6.设置应用图标
需要256*256，格式为ico，注意，不能采用直接修改后缀名的方式，需要使用专门的网站转换
vue.config.js中设置
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
win: {
icon: 'src/assets/logo.ico'
}
}
}
}
}7.打包完成后会在项目目录中生成一个dist_electron目录，里面就是打包好的文件
打包Vue3项目
1.创建Vue3项目，已有则不用创建
npm create vue@latest2.安装打包工具，依次安装！
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
// 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
// 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用于打包可执行文件
{
"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文件，将路径为相对路径，配置端口号及其他参数
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尺寸，小了用不了。
{
"files": ["electron/main.js", "electron/preload.js", "./dist"],
"productName": "vue_project",
"icon": "./icon.ico"
}7.运行命令完成打包，找到项目根目录下的dish目录，dish目录中的win-unpacked就是打包完成的相关文件，找到.exe结尾的文件运行就可以了！
npm run exe-build8.开发阶段可使用以下命令启动项目
npm run exe-dev还有一种更简单的方式，详情见：快速开始 | electron-vite，是由vite团队出品的，可以自己研究研究！