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配置

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 主進程