electron vite vue打包

1. 安装所需依赖

electron
concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
wait-on：等待资源，此处用来等待url可访问
cross-env: 该库让开发者只需要注重环境变量的设置，而无需担心平台设置
electron-builder: electron打包库

npm install electron --save-dev
npm install concurrently wait-on --save-dev
npm install cross-env electron-builder --save-dev

2. 配置文件

vite.config

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'                                         // 新增

// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, './dist/'),    // 新增
  plugins: [vue()]
})

新建electron文件夹

main.js

javascript 复制代码

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV

function createWindow() {
    // 隐藏菜单栏
    Menu.setApplicationMenu(null)
    // 创建浏览器窗口
    const mainWindow = new BrowserWindow({
        width: 1800,
        height: 900,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    // 加载 index.html
    // mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同，需要注意
    mainWindow.loadURL(
        NODE_ENV === 'development'
            ? 'http://localhost:8000'
            : `file://${path.join(__dirname, '../dist/index.html')}`
    );
    // 打开开发工具
    // mainWindow.webContents.openDevTools()
    // 打开开发工具
    if (NODE_ENV === "development") {
        mainWindow.webContents.openDevTools()
    }
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
    createWindow()

    app.on('activate', function () {
        // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
        // 打开的窗口，那么程序会重新创建一个窗口。
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

preload.js

javascript 复制代码

// preload.js

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

package.json

javascript 复制代码

{
  "name": "laneui",
  "version": "0.0.0",
  "main": "electron/main.js",
  "private": true,
  "homepage": "/",
  "author": {
    "name": "tech",
    "email": "mail@nodejs.cn"
  },
  "build": {
    "appId": "com.your-website.your-app",
    "productName": "ElectronApp",
    "copyright": "Copyright © 2021 <your-name>",
    "win": {
      "target": [
        "nsis"
      ]
    },
    "linux": {
      "target": [
        "rpm"
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "dist_electron"
    }
  },
  "scripts": {
    "dev": "vite --mode development --port 8000",
    "build": "vite build --mode production",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "electron": "wait-on tcp:8000 && cross-env NODE_ENV=development  electron .",
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
    "electron:build": "vite build && electron-builder",
    "electron:build:linux": "vite build && electron-builder -l --x64"
  },
  "dependencies": {
    "@microsoft/signalr": "^8.0.0",
    "@vueuse/core": "^10.7.1",
    "axios": "^1.6.5",
    "pinia": "^2.1.7",
    "rxjs": "^7.8.1",
    "vue": "^3.3.11",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@arco-design/web-vue": "^2.54.1",
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^4.5.2",
    "@vue/eslint-config-prettier": "^8.0.0",
    "concurrently": "^8.2.2",
    "cross-env": "^7.0.3",
    "electron": "^28.2.1",
    "electron-builder": "^24.9.1",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "mockjs": "^1.1.0",
    "prettier": "^3.0.3",
    "unplugin-auto-import": "^0.17.3",
    "unplugin-vue-components": "^0.26.0",
    "vite": "^5.0.10",
    "wait-on": "^7.2.0"
  }
}

3. 运行

热重载运行npm run electron:serve

windows打包 npm run electron:build

linux打包npm run yarn electron:build:linux

参考文章 https://github.com/hunter-ji/Blog/issues/54