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. 配置文件

1. vite.config

   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()]
   })
   

2. 新建electron文件夹
   1. main.js

      // 控制应用生命周期和创建原生浏览器窗口的模组
      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()
      })
      

   2. preload.js

      // 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])
        }
      })
      

   3. package.json

      {
        "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