vite+vue3+electron桌面端开发

代码哈士奇 等级 960 0 0
标签: electronhttps

vite+vue3+electron桌面端开发

ps :踩坑踩了一个多小时 如果嫌麻烦可以直接拿走用

克隆代码仓库

1.https://gitee.com/dmhsq/vue3-vite-electron https://gitee.com/dmhsq/vue3-vite-electron.git

2.https://github.com/promiseHusky/vue3-vite-electron https://github.com/promiseHusky/vue3-vite-electron.git

同样你也可以使用脚手架 来快速的创建 [还没写完 先用着仓库的吧]

效果如下

这是打包生成的

vite+vue3+electron桌面端开发 如下图是 生成的安装包 选择了 mis 和 nsis vite+vue3+electron桌面端开发

vite+vue3+electron桌面端开发

安装使用

下载代码后 进入项目目录

执行 npm install 安装依赖 执行 npm start 为开发模式 执行 npm dist 为打包项目并且生成 安装包

踩坑过程

由于 vite打包默认生成 dist目录 而 electron-builder打包也是生成 dist目录 所以 配置了 vite的build.outDir为 'build' 同样vite的配置 base: './', 这里处理了读取不到 资源文件

为了方便使用 main.js 这里使用了webpack打包 因为对vite不熟悉 我得理解是得有 index.html文件作为入口? 但是我只想打包 main.js以及相关引用 所以 使用了webpack5

如果你想修改 electron的logo 可以将 public目录下的logo.ico换成你想用的 注意这里也有一个坑 就是 生成的logo像素至少为 256x256否则会在打包的时候报错

开发注意

因为这里使用的是高版本electron 如果你想在 vue文件中 引入remote

需要安装一个依赖包 @electron/remote 还需要在 main.js里面编写如下代码 以此项目代码为演示 如下 (这里默认为我们的vue项目 如果你需要引入自定义的html并且使用remote见下面的注释代码)

const { app, Menu } = require('electron');
const isDev = require('electron-is-dev');
const AppWindow = require('./src/utils/AppWindow.js');
const menuItems = require('./menu.config.js');
const path = require('path');

app.on('ready', () => {
  const mainWindowConfig = {
    width: 1440,
    height: 768,
  };
  const urlLocation = isDev
    ? 'http://localhost:3000'
    : `file://${path.join(__dirname, './index.html')}`;
  mainWindow = new AppWindow(mainWindowConfig, urlLocation);
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
  require('@electron/remote/main').initialize();
  require('@electron/remote/main').enable(mainWindow.webContents);

  // const divWindowConfig = {
  //   width: 1440,
  //   height: 768,
  // };
  // const divUrlLocation = "xxxxx"
  // const divWindow = new AppWindow(divWindowConfig, divUrlLocation);
  // require('@electron/remote/main').enable(divWindow.webContents);
  const menu = Menu.buildFromTemplate(menuItems);
  Menu.setApplicationMenu(menu);
});

Version

0.0.0

说明

刚刚搭建完成 可实现基础的 运行 打包

下个版本

更新时间预估为下个月 这个月忙

1.自动更新 2.更加丰富的菜单配置案例(持续,部分更新) 3.封装一些electron基础操作 可通过 $electon执行 4.推出接入uniCloud的云开发模式 预估通过axios控制来实现

收藏
评论区

相关推荐

极客手中的利器:Electron
作为一个前端开发人员,你可能已经听说过Electron(https://www.electronjs.org/)了, 你知道VS Code是基于这个技术开发的。 不但VS Code,目前一些大热的软件:飞书、Slack、skype的桌面版都是基于这个技术开发的。 即使如此,这也并不足以引起你的重视, 毕竟桌面软件式微,移动端和Web开发才是大方向
electron:桌面应用程序的革命
“ 你也许不了解electron,但你应该了解或使用过atom、vscode、xmin zend,没错他们所使用的开发技术就是electon,通过前端技术开发桌面应用程序,刚开始接触electron时,考虑最多的是性能问题,不过作为一个vscode、xmin zen重度使用者的我来说,基本上对其性能的担心减少了很多,并且发现了基于vue框架构造electro
从零使用electron搭建桌面端可视化编辑器
之前有朋友希望我基于H5Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooringelectron的github地址供大家参考学习. 如果大家有更好的方案, 可以随
(三)使用electron
前提已经实现了(一)里面的效果连接:[https://www.cnblogs.com/yuNotes/p/12884930.html](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.cnblogs.com%2FyuNotes%2Fp%2F12884930.html) #### 1
(原)Electron+vue 应用实战
1.electron架构思考 ============== 在做electron桌面开发中,Electron+vue当下算是性价比的比较高的。但是electron算是小众开发,遇到问题,基本上就是掉进深坑,爬好久才出来。 为了做一个项目,我翻遍了国内好多网站。看到一篇好的文章。[Electron 应用实战 (架构篇)](https://www.oschi
electron(1)安装和使用
下载和安装 # Clone the Quick Start repository git clone https://github.com/atom/electron-quick-start # Install the dependencies and run npm install && npm start 会
Electron 快速入门及最新安装教程
> 作者:程序员学院   官方网址:[https://www.chengxuyuan.com](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.chengxuyuan.com)    微信公众号:华仁程序员学院 一、 Electron简介 ------------- Electr
Electron中通过asar打包后ffi
在使用Electron开发完应用程序后,需要打包生成各平台对应的可执行文件供用户使用。 这里以Mac平台为例,最简单的打包方案是使用**electron-packager**来对应用程序进行打包操作,如执行最简单的指令`electron-packager .`执行完成后会在同级目录生成`${appName}-${platfomr}-${arch}`目录如e
Electron开发使用Vue Devtools
转自 \[[https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Forchidflower.oschina.io%2F2017%2F03%2F29
Electron开发跨平台桌面程序入门教程
最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序,记录学习过程中的坑。 Electron是什么呢? ------------- Electron 可以让你使用纯 JavaScript 调用丰富的
Electron桌面端所见即所得
### 突然让你开发Electron应用,你能hold住吗? 如果领导突然说需要开发一款前端桌面端应用,那么对于我们前端er来说选择Electron是一件顺理成章的事情。但事实上很多同学对于Electron都不太了解和熟悉。 **如果突然让我们去开发Electron应用,很多人都会陷入迷茫和懵逼的状态**。然后在依靠网上相对较少的资料,慢慢摸索、一路踩坑
Electron踩坑记录
心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 心血来潮想做一个PC端应用,就来学学Electron,以下为学习Electron时的踩坑记录。 安装 -- 在国内安装`electron`的时候,可能会因为网络原因遇到卡在`Building fresh packages...`(yarn)或者是卡在`nod
TMS WEB Core v1.2预览版:新的Electron应用程序支持
#### 2019年2月20日,星期三 几个月前,我们已经开始与[Electron进行](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ftmssoftware.com%2Fsite%2Fblog.asp%3Fpost%3D495)实验。在工作概念验证之后,我们的目标是为Delphi开发人
vite+vue3+electron桌面端开发
vite+vue3+electron桌面端开发ps :踩坑踩了一个多小时 如果嫌麻烦可以直接拿走用克隆代码仓库1.2.同样你也可以使用脚手架 来快速的创建 如下图是 生成的安装包 选择了 mis 和 nsis 安装使用下载代码后 进入项目目录执行 npm install 安装依赖执行 npm start 为开发模式执行 npm dist 为打包项目并且生成
从零使用electron搭建桌面端可视化编辑器Dooring
之前有朋友希望我基于H5Dooring开发一款桌面端应用, 最近刚好有时间, 就花了小半天时间从零使用electron开发了桌面端的离线软件Dooringelectron. 因为之前用electron比较少, 今天刚好学了一下, 也基本把前后端打通了, 文末我会放dooringelectron的github地址供大家参考学习. 如果大家有更好的方案, 可以随