Electron + Vue3 跨平台桌面应用

丿歌颂者
840 阅读2分钟

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

什么是Electron

Electron 官网：www.electronjs.org/

WEB端可以做很多事情，但是当涉及操作系统时，可能就会力不从心。而Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。
Electron 相当于一个浏览器的外壳 , 我们将 编写的 HTML , CSS , Javascript 网页程序 嵌入进 Electron 里面，以便于在桌面上进行运行。

开发环境

  1. 安装 Node.js 环境。 官网地址：nodejs.org/zh-cn/ 建议安装最新稳定版，node 版本过低可能会引起报错。

    查看当前 node 版本： node -v

  2. 安装 Vue Cli npm install -g @vue/cli

    查看 vue 版本 vue -V

创建项目

  1. 使用 vue-cli 搭建基础 vue框架 vue create electron-vue

    和平时写 vue 项目一样，选择自己需要的配置。(我的配置项如下，仅作参考)

image.png

image.png

  1. 安装 Vue CLI Plugin Electron Builder

    cd electron-vue
vue add electron-builder

    安装过程中会提示选择Electron的版本，选择最新版本即可。

image.png

在安装的过程中，由于网络原因，Electron 可能会安装失败，这时候如果 node_modules 文件夹中已经有 electron 文件夹，则需要删除该文件夹，然后使用 cnpm 从新安装 electron

cnpm i electron --S

注意：如果在选择 electron 版本时选择的不是最新版本，则在这里安装的时候需要安装指定版本：

cnpm i electron@x.x.x --S

image.png

这样，即为搭建成功。

启动项目

安装完成后，通过命令行启动程序：

npm run electron:serve

运行效果如下：

image.png

electron-vue 项目目录

image.png

  • background.js： electron 主进程文件，可以配置 electron 应用的一些设置。如窗口大小、是否可以缩放等。相关API文档：www.electronjs.org/zh/docs/lat…

  • main.js： vue 项目相关文件

image.png

打包 electron 应用

使用 npm run electron:build 进行打包，打包成功后，可以在 dist_electron 文件夹内查看打包好的应用。

image.png

image.png

打包报错时的解决方案

  • 方案一：使用科学上网进行打包
  • 方案二：删除掉 node_modules / electron 目录，使用 cnpm i electron --S 命令重新安装electron后，再运行 npm run electron:build 打包
  • 方案三：自己下载 electron 包放在 cache 目录里。 各平台的目录地址：
Linux: $XDG_CACHE_HOME or ~/.cache/electron/
MacOS: ~/Library/Caches/electron/
Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/

下载对应 electron 包的地址：github.com/electron/el…

将单独下载的 electron 包 放到 ~/AppData/Local/electron/Cache/ 目录下，然后再运行 npm run electron:build 即可。

结语

这样，一个简单的桌面应用程序就打包完成啦~ 本篇文章只是简单的介绍了一下electron的安装及打包问题，后面还会继续更新electron的具体使用方法，我们一起共同进步吧 (^▽^)

avatar
文章
阅读
粉丝