山东省住房与建设厅网站,福田网站建设的工具,那个视频网站可以做gif,科技型中小企业服务平台Electron
目录
简介
打包简单的html/css/javascript项目
打包Vue2项目
打包Vue3项目 简介
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows…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 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
{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-dev
4.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 start
6.在项目中安装Electron Forge是一个处理 Electron 应用程序打包与分发的一体化工具
官方教程打包您的应用程序 | Electron
npm install --save-dev electron-forge/cli
7..在package.json文件中的script中添加以下内容
//...
scripts: {package: electron-forge package,make: electron-forge make
},
//...
8.制作一个x64架构、win64平台的软件
制作别的别的架构、别的平台的配置见CLI - Electron Forge
npm start make ----arch x64 --platform win64
9.打包成windows系统可执行文件
npm run package
10.打包完成会在当前目录下生成一个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 -g
vue create vue2_project
2.添加electron-builder打包工具
配置electron镜像地址
npm config set registry http://registry.npm.taobao.org/
npm config set electron_mirrorhttps://npm.taobao.org/mirrors/electron/
npm config set electron_builder_binaries_mirrorhttp://npm.taobao.org/mirrors/electron-builder-binaries/
vue add electron-builder
3.项目中如果设置跨域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:build
5.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 vuelatest
2.安装打包工具依次安装
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 its 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, its 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 apps 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:urlimport { 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-build
8.开发阶段可使用以下命令启动项目
npm run exe-dev
还有一种更简单的方式详情见快速开始 | electron-vite是由vite团队出品的可以自己研究研究
