【简直不要太easy】Electron-builder打包vite+vue3+JavaScript

背景

1. 适用对象

• 新建vite+vue3+JavaScript和已经写好项目，用electron-builder打包

• 将前端项目打包成桌面应用

2.版本

"node": "^18.17.0"
"vue": "^3.3.4"
"electron": "^25.3.2",
"electron-builder": "^24.6.3",
"vite": "^4.4.6",
"vite-plugin-electron": "^0.12.0"

3.目录结构

打包步骤

1. 安装包

除项目本身的包（npm install），还需加如下3个包

npm add electron vite-plugin-electron electron-builder -D

2. 打包配置

• 1）创建electron入口，根目录新建electron/main.js，默认配置如下

import { app, BrowserWindow } from 'electron';
import path from 'path'

const createdWindow = () => {
    const win = new BrowserWindow({
        width:900,
        height:600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation:false,
        }
    })

    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
    } else {
        win.loadFile(path.resolve(__dirname, '../dist/index.html'));
    }
}

app.whenReady().then(()=>{
    createdWindow()
})

• 2）vite打包配置修改，vite.config.js，默认配置如下

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: 'electron/main.js'
  })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

• 3）electron打包配置，package.json配置

"scripts":修改打包脚本命令"build": "vite build && electron-builder", electron打包配置，继续在package.json中新增基础配置

"build": {
    "appId": "com.vite-electron",
    "productName": "MyApp",
    "copyright": "Copyright © 2023 vite",
    "nsis": {
      "oneClick": false,  
      "allowToChangeInstallationDirectory": true 
      
    },
    "files": [
      "dist/**/*",   
      "dist-electron/**/*"  
    ],
    "directories": {
      "output": "output/"   
    }
  }

• 4）运行一次项目npm run dev， 生成dist-electron/main.js

vite将main入口文件，编译为CommonJS规范（dist-electron/main.js）

3. 开始打包

npm run build

此时根目录生成文件夹output：

• MyApp Setup 0.0.0.exe点击安装，直接安装在本地电脑
• win-unpacked文件夹，找到对应exe文件直接运行

自定义

按需检索，官网都有

• electron/main.js编辑应用的视窗，标题菜单栏等桌面显示配置
• package.json/build: 编辑应用安装卸载等打包配置