vite4+vue3+electron23.3+ts桌面应用bs端开发 打包windows、linux、max三个系统的安装包

vite4+vue3+electron23.3+ts桌面应用bs端开发 打包windows、linux、max三个系统的安装包

主要包依赖

    "electron-store": "^8.1.0",  //全局数据状态管理,可选择性安装"electron": "23.3.8","electron-builder": "^24.6.3", //打包用"vue": "^3.2.0","vite": "4.4.6","vite-plugin-html": "^3.2.0","@vitejs/plugin-vue": "^4.2.3",

指定主进程

  "main": "electron/electron.js",   //这里是electron主进程的路径,可以参考官网,快速搭建

打包命令配置:打包有两种方式,推荐使用下面这种,打包后的体积小

不同命令打包后可生成 .exe 、 .deb 、 .dmg 安装包

    "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"","build:linux": "yarn build:for:electron && electron-builder --publish never --linux","build:win": "yarn build:for:electron && yarn electron:builder","build:mac": "yarn build:for:electron && electron-builder --publish never --macos","build:web": "cross-env vite build --mode=production"

打包build配置:

  "build": {"publish": [{"provider": "generic","url": ""}],"appId": "appId", //软件的唯一标识"productName": "软件名字","copyright": "Copyright © 2023 ${author}",//版权信息"mac": {"icon": "electron/icon.png", //icon"category": "public.app-category.utilities"},"win": {"target": ["nsis"],"publish": {"provider": "generic","url": "http://your-domain/update/win","useMultipleRangeRequest": false},"icon": "electron/icon.png"},"linux": {"icon": "electron/icon.icns","target": ["deb","AppImage"]},"deb": {"icon": "build/icon.icns"},"rpm": {"icon": "build/icon.icns"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true,"perMachine": false,"allowElevation": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron" //打包安装包的路径}}

vite配置

vite配置官网

import { resolve } from 'path';
import { loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createHtmlPlugin } from 'vite-plugin-html';
import { visualizer } from 'rollup-plugin-visualizer'; //打包体积分析
// import viteImagemin from 'vite-plugin-imagemin';//图片压缩  这个可以降低体积,但是在国外,不好安装,去掉了
import type { UserConfig, ConfigEnv } from 'vite';import { modifyVars } from './src/assets/styles/ant/lessModifyVars';function pathResolve(dir: string) {return resolve(__dirname, '.', dir);
}// https://vitejs.dev/config/
export default ({ mode }: ConfigEnv): UserConfig => {const root = process.cwd();const env = loadEnv(mode, root);const { VITE_APP_TITLE, VITE_OUT_DIR, VITE_PORT, VITE_PUBLIC_PATH, VITE_APP_PROXY } = env;return {base: VITE_PUBLIC_PATH, //根路径resolve: {//静态资源alias: {'/@': pathResolve('src'),'/@views': pathResolve('src/views'),'/@components': pathResolve('src/components'),'/@types': pathResolve('src/types'),},},server: {open: true,port: Number(VITE_PORT),host: '0.0.0.0', // ← 新增内容 ←hmr: {overlay: true,},proxy: {//反向代理'/api': {target: VITE_APP_PROXY,changeOrigin: true,//跨域rewrite: (path) => path.replace(/^\/api/, ''),},},},build: {outDir: VITE_OUT_DIR,sourcemap: true,target: ['es2020'],minify: 'terser',//压缩方式terserOptions: {//去除打包后的console和debuggercompress: {drop_console: true,drop_debugger: true,},},chunkSizeWarningLimit: 1000,},optimizeDeps: { //依赖优化选项include: ['lodash','ant-design-vue/es/locale/zh_CN','@ant-design/icons-vue','echarts','papaparse',],},css: {preprocessorOptions: {less: {modifyVars: {hack: `true; @import (reference) "${resolve('src/assets/styles/abstracts/index.less',)}";`,...modifyVars,},javascriptEnabled: true,},},},plugins: [vue(),// visualizer({ open: false }), //打包体积分析,优化的时候用,平时不用// viteImagemin({//图片压缩,不好下载//   gifsicle: {//     optimizationLevel: 7,//     interlaced: false//   },//   optipng: {//     optimizationLevel: 7//   },//   mozjpeg: {//     quality: 20//   },//   pngquant: {//     quality: [0.8, 0.9],//     speed: 4//   },//   svgo: {//     plugins: [//       {//         name: 'removeViewBox'//       },//       {//         name: 'removeEmptyAttrs',//         active: false//       }//     ]//   }// }),createHtmlPlugin({minify: mode === 'production',inject: {data: {title: VITE_APP_TITLE, },},}),],};
};

electron.js 主进程

在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【服务器】Strace显示后台进程输出

今天有小朋友遇到一个问题 她想把2331509和2854637这两个进程调到前台来,以便于在当前shell查看这两个python进程的实时输出 我第一反应是用jobs -l然后fg (参考这里) 但是发现jobs -l根本没有输出: 原因是jobs看的是当前ses…

测试框架pytest教程(4)运行测试

运行测试文件 $ pytest -q test_example.py 会运行该文件内test_开头的测试方法 该-q/--quiet标志使输出保持简短 测试类 pytest的测试用例可以不写在类中,但如果写在类中,类名需要是Test开头,非Test开头的类下的test_方法不会被搜集为用…

html动态爱心代码【一】(附源码)

前言 七夕马上就要到了,为了帮助大家高效表白,下面再给大家带来了实用的HTML浪漫表白代码(附源码)背景音乐,可用于520,情人节,生日,表白等场景,可直接使用。 效果演示 文案修改 var loverNam…

IT运维:使用数据分析平台监控 Linux 节点

监控目标 监控 Linux 服务器的基本信息以及各项性能指标,包括: CPU 内存、Swap 网络 文件系统、磁盘 IO 解决方案 使用 Node exporter 收集硬件以及操作系统内核的指标数据,并通过 HTTP API 提供数据 使用 Vector agent 通过 Node export…

神经网络为什么可以学习

本资料转载于B站up主:大模型成长之路,仅用于学习和讨论,如有侵权请联系 动画解析神经网络为什么可以学习_哔哩哔哩_bilibilis 1、一个神经网络是由很多神经元形成的 1.1 也可以是一层,也可以是多层 2 层和层之间的连接就跟一张网一样 2.1 每…

登陆接口的的Filter过滤

目录 一、概述 二、基本操作 三、登陆检查接口 一、概述 什么是Filter? Filter表示过滤器,是 JavaWeb三大组件(Servlet、Filter、Listener)之一。 过滤器可以把对资源的请求拦截下来,从而实现一些特殊的功能 使用了过滤器之后&#xff0…

安全学习DAY18_信息打点-APP资产搜集

信息打点-APP资产&静态提取&动态抓包&动态调试 文章目录 信息打点-APP资产&静态提取&动态抓包&动态调试本节知识&思维导图本节使用到的链接&工具 如何获取目标APP从名称中获取APP从URL获取APP APP搜集资产信息APP提取信息分类信息提取方式信息…

数据库知识

怎么做 常见的数据库 Oracle Mysql SOLSever Navicat (新版可以链接mysql oracle) http://sqlfiddle.com/ 数据库操作在线练习 mysql自带四个数据库 数据库语言的使用 显示数据库:show databases; 创建数据库:…

收集的一些比较好的git网址

1、民间故事 https://github.com/folkstory/lingqiu/blob/master 2、童话故事 https://gutenberg.org/cache/epub/11027/pg11027-images.html 搜索:fairy story 3、一千零一夜 https://gutenberg.org/cache/epub/2591/pg2591-images.html 4、ai绘画关键词 https:…

小程序中通过canvas生成并保存图片

1. html <canvas class"canvas" id"photo" type"2d" style"width:200px;height: 300px;"></canvas> <button bindtap"saveImage">保存</button> <!-- 用来展示生成的那张图片 --> <image…

node使用高版本的oracledb导致连接oracle的Error: NJS-138异常

异常信息如下 Error: NJS-138: connections to this database server version are not supported by node-oracledb in Thin mode 我的oracle版本是11g&#xff0c;之前的使用正常&#xff0c;今天却报错了&#xff0c;显示不支持thin模式&#xff0c;后面回退版本就可以了。

【Python原创设计】基于Python Flask 机器学习的全国+上海气象数据采集预测可视化系统-附下载链接以及详细论文报告,原创项目其他均为抄袭

基于Python Flask 机器学习的全国上海气象数据采集预测可视化系统 一、项目简介二、开发环境三、项目技术四、功能结构五、运行截图六、功能实现七、数据库设计八、源码获取 一、项目简介 在信息科技蓬勃发展的当代&#xff0c;我们推出了一款基于Python Flask的全国上海气象数…

解决:(error) ERR unknown command shutdow,with args beginning with

目录 一、遇到问题 二、出现问题的原因 三、解决办法 一、遇到问题 要解决连接redis闪退的问题&#xff0c;按照许多的方式去进行都没有成功&#xff0c;在尝试使用了以下的命名去尝试时候&#xff0c;发现了这个问题。 二、出现问题的原因 这是一个粗心大意导致的错误&am…

MySQL 用户管理操作

目录 一、用户管理概述 二、用户管理 1、创建用户 2、删除用户 三、账户密码管理 1、root用户修改自己的密码 2、ROOT用户修改其他普通用户密码 3、普通用户修改自己的密码 4、ROOT用户密码忘记解决办法 1&#xff09;Linux系统 2&#xff09;windows系统 四、用户权…

动态规划:删除并获得点数

题目来源&#xff1a;删除并获得点数 题目分析 题目分析&#xff1a; 从题目中可以获取到的条件是&#xff0c;如果选择了i位置&#xff0c;那么就必须删除与i-1和i1的位置的值相同的所有的值。 既然要删除相同的值&#xff0c;那么我们可以想&#xff0c;要不要先排序&…

部署问题集合(十九)linux设置Tomcat、Docker,以及使用脚本开机自启(亲测)

前言 因为不想每次启动虚拟机都要手动启动一遍这些东西&#xff0c;所以想要设置成开机自启的状态 设置Tomcat开机自启 创建service文件 vi /etc/systemd/system/tomcat.service添加如下内容&#xff0c;注意修改启动脚本和关闭脚本的地址 [Unit] DescriptionTomcat9068 A…

AP9235 dc-dc升压恒流电源驱动IC 2000ma SOT23-6

概述 AP9235B 系列是一款固定振荡频率、恒流输出的升压型DC/DC转换器&#xff0c;非常适合于移动电话、PDA、数码相机等电子产品的背光驱动。输出电压可达30V &#xff0c;3.2V输入电压可以驱动六个串联LED&#xff0c; 2.5V输入电压可以驱动两路并联LED&#xff08;每路串联…

物联网在制造业中的应用

制造业目前正在经历第四次工业革命&#xff0c;物联网、人工智能和机器人等技术进步正在推动行业的发展。研究表明&#xff0c;到2024年&#xff0c;全球制造商将在物联网解决方案上投资700亿美元&#xff0c;许多制造商正在实施物联网设备&#xff0c;以利用预测性维护和复杂的…

Android 12 源码分析 —— 应用层 一(SystemUI准备篇)

Android 12 源码分析 —— 应用层一&#xff08;SystemUI准备篇&#xff09; 在接下来的时间中&#xff0c;将会使用Pixel 3(blueline)作为研究对象&#xff0c;选用AOSP的android-12.0.0_r34分支作源代码。 先从android的应用层进行探析&#xff0c;然后慢慢深入android的fr…

CrossOver2023虚拟机工具最新版本功能介绍

想要在Mac OS中运行Windows程序&#xff0c;除了使用虚拟机外&#xff0c;使用CrossOver在Mac OS系统中运行Windows程序是非常不错的选择。CrossOver基于Wine技术&#xff0c;可以在Mac OS上运行许多Windows应用程序&#xff0c;而无需安装整个Windows操作系统。 本次发布的Cr…