Electron项目的新建和打包流程

第一步： 初始化vue3项目（node版本18.16.1）

npm init vue@latest

npm install后即可npm run dev启动项目。

第二步： 安装electron：

npm install electron --save-dev

第三步： 新建electron文件夹

在根目录新建electron文件夹，在文件夹下新建main.js文件：

写法上这里用的是import，如果在运行npm run electron:dev错误就换require引入。

// require引入报错的时候一定要改用import
// const {app, BrowserWindow} = require ('electron');
import {app, BrowserWindow} from 'electron';

// 是否是生产环境
const isPackaged = app.isPackaged;
const createWindow = () => {
  const mainWindow = new BrowserWindow ({
    width: 800,
    height: 600,
  });

  if (!isPackaged) {
    mainWindow.openDevTools ();
  }
  // 默认打开开发者工具
  // 8888是npm run dev启动起来后的端口号
  mainWindow.loadURL ('http://localhost:8888/');
};

app.whenReady ().then (() => {
  createWindow ();
});

package.json文件中需要修改两个地方：

然后这时候就可以运行npm run electron:dev，此时一个electron结合vue3的项目就运行起来了。

在操作过程中发现，启动该项目需要npm run dev和npm run electron:dev，可以使用concurrently把两个命令合成一个命令：

首先安装concurrently：

 npm install concurrently --save-dev

然后修改package.json中的这条：

"electron:dev": "concurrently vite "electron .""

这时候重新运行npm run electron:dev，项目就启动了。

第四步： electron的打包

首先安装打包工具

npm install electron-builder --save-dev

修改vite.config.ts文件的base路径：

修改打包配置：

  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --build --force",
    "electron:dev": "concurrently vite \"electron .\"",
    "electron:build": "npm run build && electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "appId": "your.id",
    "productName": "Electron + Vue3 开发桌面应用",
    "copyright": "Copyright © year 魏蕊",
    "directories": {
      "output": "app_client"
    },
    "mac": {
      "category": "public.app-category.music",
      "icon": "dist/favicon.ico",
      "target": [
        {
          "target": "dmg",
          "arch": [
            "x64"
          ]
        },
        {
          "target": "zip",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "win": {
      "icon": "dist/favicon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "dist/favicon.ico",
      "uninstallerIcon": "dist/favicon.ico"
    }
  },

然后运行npm run electron:build即可打包成桌面应用，打包过程中可能会提示项目中favicon.icon尺寸至少是256*256，需要改下这个图标的尺寸重新打包，打包成功后双击安装包即可安装到电脑上。

示例项目git地址：git地址