vue3+electron搭建桌面软件

vue3+electron开发桌面软件

最近有个小项目, 客户希望像打开 网易云音乐 那么简单的运行起来系统. 前端用 Vue 会比较快一些, 因此决定使用 electron 结合 Vue3 的方式来完成该项目.

然而, 在实施过程中发现没有完整的博客能够记录从创建到打包的流程, 摸索一番之后, 随即梳理成文供大家参考.

废话不多说, 直接开始!

对了, 开始之前, 先给 Vue3 和 electron 在 package.json 中的版本号展示出来供大家参考.

"dependencies": {
  "nodemon": "^3.1.3",
  "vue": "^3.4.21"
},
"devDependencies": {
  "@vitejs/plugin-vue": "^5.0.4",
  "electron": "^31.0.0",
  "vite": "^5.2.0"
}

1, 创建 Vue3 项目

终端指令

npm init vite

创建好之后, 就是根据终端提示初始化 node_modules 了, 创建 Vue3 的项目这里就不多说了, 能看这篇文章的都是大佬了, Vue3 工程的创建应该是手到擒来的呢!

2, Vue 项目中安装 electron

终端指令

npm i electron -D

3, electron 的一些初始化配置

3.1 创建 electron 入口文件

根目录创建 electron 文件夹, 并创建 main.js 文件, 内容示例如下:

const { app, protocol, BrowserWindow, globalShortcut } = require('electron')
// 需在当前文件内开头引入 Node.js 的 'path' 模块
const path = require('path')

app.commandLine.appendSwitch('--ignore-certificate-errors', 'true')
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

const createWindow = () => {
  const win = new BrowserWindow({
    minWidth: 960,
    minHeight: 540,
    width: 960,
    height: 540,
    //窗口是否在屏幕居中. 默认值为 false
    center: true,
    //设置为 false 时可以创建一个无边框窗口 默认值为 true。
    frame: false,
    //窗口是否在创建时显示。 默认值为 true。
    show: true,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      preload: path.join(__dirname, 'preload.js'),
      // webSecurity: false, false 是 控制台会报警告, 不太喜欢, 就设置为了 true
      webSecurity: true
    }
  })
  win.setMenu(null)// 不展示菜单
  if (app.isPackaged) {
    win.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`)
  } else {
    // win.loadURL('http://127.0.0.1:5173/') 127... 这个地址的话, 运行起来会白屏, 需使用 localhost
    win.loadURL('http://localhost:5173/')
    win.webContents.openDevTools()// 打开调试工具, 上线时这行是要注释掉的
  }
  globalShortcut.register('CommandOrControl+Shift+i', function () {
    win.webContents.openDevTools()
  })
}

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

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

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

3.2 在 package.json 中配置 electron

两个操作:
1, 删除: “type”: “module”, 要不然运行会报错, 因为 electron 的包都是通过 require 引入的
2, 添加: “main”: “electron/main.js”,

3.3 创建 preload.js 文件

在 electron 文件夹中创建 preload.js 文件, 内容示例如下(如果不需要也可以不创建, 不创建时 main.js 中的 preload 属性也不需要配置):

// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与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, 配置启动命令

建议使用 nodemon 来进行热更新, 谁用谁爽!

4.1 安装 nodemon

终端指令

npm i nodemon

4.2 配置 package.json 文件

在 scripts 属性下配置以下内容:

"start": "vite | nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"

5, 启动项目

终端指令

npm start

6, 安全策略

经过以上 五步 的操作, 正常情况下你的项目就会启动起来了, 只不过可能会在控制台报一个警告, 内容大致如下:

Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
  Policy set or a policy with "unsafe-eval" enabled. This exposes users of
  this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.

是安全策略的设置告警，意思是内容安全策略没有设置，或者使用了unsafe-eval的安全设置，只需在index.html文件中设置安全策略即可。
其实, 程序员是忽略警告的, 不过你如果有和我一样的强迫症, 可以在 index.html 文件中添加以下内容来清除次警告:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">

meta 标签, 不用我说添加到哪里了吧?

好了, 到此呢, 项目就能够正常启动开发了, 文章到此暂告一个段落, 后续补充 electron 打包的章节!
附上关键程序截图:
关键代码截图

接下来我们继续聊 electron 打包的问题

7, electron 打包

7.1, 安装electron打包开发依赖

终端指令

npm install --save-dev electron-builder

7.2, 配置 package.json 文件

在package.json添加 author、description、build 字段，同时在 scripts 字段添加 electron:build 命令. 完整 package.json 配置示例:

{
  "name": "new-project",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",
  "author": "CorderLeoD",
  "description": "Hello World!",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "start": "vite | nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue",
    "electron:build": "vite build && electron-builder"
  },
  "dependencies": {
    "nodemon": "^3.1.3",
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "electron": "^31.0.0",
    "electron-builder": "^24.13.3",
    "vite": "^5.2.0"
  },
  "build": {
    "appId": "cc11001100.electron.example-001",
    "copyright": "CC11001100",
    "productName": "example-001",
    "directories": {
      "buildResources": "build",
      "output": "electron_dist"
    },
    "nsis": {
      "oneClick": false,
      "language": "2052",
      "perMachine": true,
      "allowToChangeInstallationDirectory": true
    },
    "dmg": {
      "background": "build/background.png",
      "icon": "build/icons/icon.icns",
      "iconSize": 100,
      "contents": [
        {
          "x": 380,
          "y": 180,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 180,
          "type": "file"
        }
      ],
      "window": {
        "x": 100,
        "y": 100,
        "width": 500,
        "height": 300
      }
    },
    "mac": {
      "target": [
        "dmg",
        "zip"
      ],
      "category": "public.app-category.utilities"
    },
    "win": {
      "icon": "build/icons/food.png",
      "target": {
        "target": "nsis",
        "arch": [
          "x64",
          "ia32"
        ]
      }
    },
    "asar": false,
    "files": [
      "./dist",
      "./electron",
      "!**/node_modules/**"
    ],
    "extends": null
  }
}

注: 关于 build 的具体配置, 不在一一列举, 大家自行搜索吧!

7.3, 完善打包所需资源

在 7.2 的 build 属性中会有 background, icon 等需要的图片资源, 其实就是程序安装后的图标, 按照上述示例, 需要在项目根目录创建 build 文件夹, 而后在 build 文件夹中创建 icons 文件夹, 然后放入对应图片资源.
注意：windows系统中icon需要256*256的ico格式图片

7.4, 配置 vite.config.js

添加 base: “./”
修改打包文件的引入路径的, 要不然打包后打开应用程序会白屏.
示例代码:

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

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  plugins: [vue()],
})

7.5 打包

终端指令:

npm run electron:build

初次打包, 时间会比较久, 因为需要从 GitHub 下载资源, 这个时候你可以打开浏览器访问 GitHub 看能不能访问, 如果不能访问, 打包大概率会失败, 网络超时了.

8, 一个问题

有一个问题, 需要特别说明, electron 需要自己一个特殊的镜像, 即使你切换淘宝源, 也可能会有问题, 这个情况伴随 electron 使用的整个过程, 不单单是在打包环节.

这个问题可能发生在你安装 electron 的时候, 或者 安装 electron-builder 的时候, 或者 打包 的时候, 怎么解决呢?

找到 .npmrc 文件, 添加下面一行内容即可:

electron_mirror=https://npmmirror.com/mirrors/electron/

9, 启动项目

步骤 7.5 打包指令会默认打包对应平台的安装包 (就是你电脑系统环境对应的安装包), 你可以在 package.json 文件的 script 属性 打包指令的配置后面添加参数来打一个指定操作系统的安装包.

找到 electron_dist 文件夹中的安装包, 安装之后, 双击启动项目吧!

最后再安排个项目截图:
electron打包项目

Vue 的 logo 裂了, 不再处理了, O(∩_∩)O哈哈~

本章完!

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/705244.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Android 14 系统启动流程 之 启动init进程、启动Zygote进程

Android 14 系统启动流程 之 启动init进程、启动Zygote进程

Android 14 系统启动流程 之 启动init进程、启动Zygote进程 废话不多说&#xff0c;先上图&#xff0c;不清楚的可以在评论区留言。
阅读更多...
C#下WinForm多语种切换

C#下WinForm多语种切换

这是应一个网友要求写的&#xff0c;希望对你有所帮助。本文将介绍如何在一个WinForm应用程序中实现多语种切换。通过一个简单的示例&#xff0c;你将了解到如何使用资源文件管理不同语言的文本&#xff0c;并通过用户界面实现语言切换。 创建WinForm项目 打开Visual Studio&a…
阅读更多...
ACL原理和基础配置

ACL原理和基础配置

ACL&#xff08;Access Control List&#xff0c;访问控制列表&#xff09;是一种用于控制网络设备或操作系统上资源访问权限的方法。ACL能够基于规则和条件来允许或拒绝对资源的访问。 标准ACL&#xff08;Standard ACL&#xff09;&#xff1a;基于源IP地址来进行流量过滤&a…
阅读更多...
实现一个vue js小算法 选择不同的时间段 不交叉

实现一个vue js小算法 选择不同的时间段 不交叉

以上图片选择了时间段 现在需要判断 当前选择的时间段 不能够是 有交叉的所以现在需要循环判断 //判断时间段是否重叠交叉 export function areIntervalsNonOverlapping(intervals:any) {// 辅助函数&#xff1a;将时间字符串转换为从当天午夜开始计算的分钟数function conver…
阅读更多...
视频格式转换avi格式怎么弄？分享视频转换方法

视频格式转换avi格式怎么弄？分享视频转换方法

视频格式转换avi格式怎么弄&#xff1f;AVI作为一种广泛支持的视频格式&#xff0c;能够在多种设备和播放器上顺畅播放&#xff0c;确保我们的视频内容能够无障碍地分享给朋友或上传至各大平台。其次&#xff0c;AVI格式通常具有较好的兼容性&#xff0c;能够避免格式转换过程中…
阅读更多...
Coursera耶鲁大学金融课程：Financial Markets 笔记Week 01

Coursera耶鲁大学金融课程：Financial Markets 笔记Week 01

Financial Markets 本文是学习 https://www.coursera.org/learn/financial-markets-global这门课的学习笔记 这门课的老师是耶鲁大学的Robert Shiller https://en.wikipedia.org/wiki/Robert_J._Shiller Robert James Shiller (born March 29, 1946)[4] is an American econ…
阅读更多...
React+TS前台项目实战（七）-- 全局常用组件Select封装

React+TS前台项目实战（七）-- 全局常用组件Select封装

文章目录 前言Select组件1. 功能分析2. 代码详细注释说明3. 使用方式4. 效果展示&#xff08;1&#xff09;鼠标移入效果&#xff08;2&#xff09;下拉框打开效果&#xff08;3&#xff09;回调输出 总结 前言 今天这篇主要讲全局select组件封装&#xff0c;可根据UI设计师要…
阅读更多...
力扣148. 排序链表

力扣148. 排序链表

给你链表的头结点 head &#xff0c;请将其按 升序 排列并返回 排序后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [4,2,1,3] 输出&#xff1a;[1,2,3,4] 示例 2&#xff1a; 输入&#xff1a;head [-1,5,3,4,0] 输出&#xff1a;[-1,0,3,4,5] 示例 3&…
阅读更多...
谷粒商城实战(036 k8s集群学习2-集群的安装)

谷粒商城实战(036 k8s集群学习2-集群的安装)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第343p-第p345的内容 k8s 集群安装 kubectl --》命令行操作 要进入服务器 而且对一些不懂代码的产品经理和运维人员不太友好 所以我们使用可视化…
阅读更多...
私域引流宝PHP源码 以及搭建教程

私域引流宝PHP源码 以及搭建教程

私域引流宝PHP源码 以及搭建教程
阅读更多...
怎么防止源代码泄露？9种方法教会你！

怎么防止源代码泄露？9种方法教会你！

怎么防止源代码泄露&#xff1f;首先要了解员工可以通过哪些方式将源代码传输出去&#xff01; 物理方法&#xff1a; — 网线直连&#xff0c;即把网线从墙上插头拔下来&#xff0c;然后和一个非受控电脑直连; — winPE启动&#xff0c;通过光盘或U盘的winPE启动&#xff0c;甚…
阅读更多...
夏日炎炎 水域守护：北斗守护安全防线——为生命撑起智能保护伞

夏日炎炎 水域守护：北斗守护安全防线——为生命撑起智能保护伞

随着夏季的来临&#xff0c;炎热的天气让许多人纷纷寻求水的清凉。清凉的河流与广阔的海域成为了不少人消暑降温的向往之地。然而&#xff0c;私自下河、下海的行为却暗藏着巨大的安全隐患&#xff0c;每年夏季溺水事故频发&#xff0c;给无数家庭带来不可挽回的悲痛。为有效遏…
阅读更多...
高考志愿填报，如何分析自己的优势特长？

高考志愿填报，如何分析自己的优势特长？

据不完全统计&#xff0c;80%的高三学生&#xff0c;不清楚自己要报什么专业&#xff0c;以及将来从事哪种职业&#xff1f;有的人则是完全听从父母的安排&#xff0c;有人听老师的建议&#xff0c;有人追热门&#xff0c;有人查什么专业可以拿高薪.... 而现实就是&#xff1a…
阅读更多...
构建汛期智慧水利新生态：EasyCVR视频汇聚监控综合管理方案解析

构建汛期智慧水利新生态：EasyCVR视频汇聚监控综合管理方案解析

一、项目背景与目标 随着我国水利事业的不断发展&#xff0c;水利设施的管理与维护工作愈发重要。随着夏季汛期的到来&#xff0c;水利管理工作面临着巨大的挑战。为确保水利设施的安全运行&#xff0c;及时应对可能出现的汛情&#xff0c;建设一套高效、智能的视频监控可视化…
阅读更多...
k8s之kubelet证书时间过期升级

k8s之kubelet证书时间过期升级

1.查看当前证书时间 # kubeadm alpha certs renew kubelet Kubeadm experimental sub-commands kubeadm是一个用于引导Kubernetes集群的工具&#xff0c;它提供了许多命令和子命令来管理集群的一生周期。过去&#xff0c;某些功能被标记为实验性的&#xff0c;并通过kubeadm a…
阅读更多...
【电子信息工程专业课】学习记录

【电子信息工程专业课】学习记录

数字信号处理 离散时间信号与系统 周期延拓 一个连续时间信号经过理想采样后&#xff0c;其频谱将沿着频率轴以采样频率Ωs 2π / T 为间隔而重复。 混频 各周期的延拓分量产生频谱交替的现象 奈奎斯特采样定理 fs > 2fh Z变换 收敛域&#xff1a;使任意给定序列x(n)的Z变…
阅读更多...
钓鱼小助手 —— 借助文心智能体平台打造钓鱼佬神器

钓鱼小助手 —— 借助文心智能体平台打造钓鱼佬神器

前言 &#x1f680;前方高能 &#x1f680;钓鱼小助手上线了 有没有喜欢钓鱼的程序猿呀&#xff0c;福利来了&#xff0c;特意整了一个钓鱼的小助手&#xff0c;以后钓鱼小技巧都可以咨询了。 走过路过&#xff0c;不要错过&#xff0c;快快体验吧~ &#x1f680;&#x1…
阅读更多...
abap 多线程运行demo

abap 多线程运行demo

SAP 提供多种多线程的方法去优化程序的执行效率 1.分别执行多个job 2.Call function STARTING NEW TASK 3.直接使用SAP 提供的SPTA 框架函数&#xff1a;SPTA_PARA_PROCESS_START_2 本次&#xff0c;我们着重来介绍一下三种方法中函数的使用方法 获取空闲线程数&#xff1a…
阅读更多...
Calibre版图验证工具调用_笔记

Calibre版图验证工具调用_笔记

Siemens EDA Calibre版图验证工具调用 采用Cadence Virtuoso Layout Editor直接调用Siemens EDA Calibre工具需要进行文件设置&#xff0c; 在用户的根目录下&#xff0c;找到.cdsinit文件&#xff0c; 在文件的结尾处添加以下语句即可&#xff0c;其中&#xff0c;calibre.skl…
阅读更多...
随手记：uniapp图片展示，剩余的堆叠

随手记：uniapp图片展示，剩余的堆叠

UI效果图&#xff1a; 实现思路&#xff1a; 循环图片数组&#xff0c;只展示几张宽度就为几张图片边距的宽度&#xff0c;剩下的图片直接堆叠展示 点击预览的时候传入当前的下标&#xff0c;如果是点击堆叠的话&#xff0c;下标从堆叠数量开始计算 <template><…
阅读更多...
最新文章

Copyright @ 2022~2023