vite+vue3+electron桌面端开发

代码哈士奇
• 阅读 1407

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控制来实现

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
2年前
swap空间的增减方法
(1)增大swap空间去激活swap交换区:swapoff v /dev/vg00/lvswap扩展交换lv:lvextend L 10G /dev/vg00/lvswap重新生成swap交换区:mkswap /dev/vg00/lvswap激活新生成的交换区:swapon v /dev/vg00/lvswap
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
2年前
SpringBoot自定义序列化的使用方式
场景及需求:项目接入了SpringBoot开发,现在需求是服务端接口返回的字段如果为空,那么自动转为空字符串。例如:\    {        "id":1,        "name":null    },    {        "id":2,        "name":"x
Stella981 Stella981
2年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这