1. 先到静态页面包外面安装electron-packager

    1
    2
    3

    npm install electron

    再安装electron-packager

    1
    2
    npm install electron-packager

  2. 到静态页面文件夹里面创建main.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    const {app,BrowserWindow} = require('electron'); //引入electron

    let win;
    let windowConfig = {
            width: 800,
            height: 600
    }; //窗口配置程序运行窗口的大小

    function createWindow() {
       win = new BrowserWindow(windowConfig); //创建一个窗口
       win.loadURL(`file://${__dirname}/index.html`); //在窗口内要展示的内容index.html 就是打包生成的index.html
     //win.webContents.openDevTools(); //开启调试工具
       win.on('close', () => {
      //回收BrowserWindow对象
       win = null;
       });
       win.on('resize', () => {
       win.reload();
       })
    }
    app.on('ready', createWindow);
    app.on('window-all-closed', () => {
    app.quit();
    });
    app.on('activate', () => {
    if (win == null) {
     createWindow();
    }
    });

  3. 在静态文件夹里面创建文件package.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    {
     "name": "demo",
     "productName": "demo",
     "author": "reisen",
     "version": "1.1.1",
     "main": "main.js",
     "description": "a electron demo",
     "scripts": {
       "pack": "electron-builder --dir",
       "dist": "electron-builder",
       "postinstall": "electron-builder install-app-deps"
     },
     "build": {
       "electronVersion": "11.5.0",
       "win": {
         "requestedExecutionLevel": "highestAvailable",
         "target": [
           {
             "target": "nsis",
             "arch": [
               "x64"
             ]
           }
         ]
       },
       "appId": "demo",
       "artifactName": "demo-version−{arch}.${ext}",
       "nsis": {
         "artifactName": "demo-version−{arch}.${ext}"
       },
       "extraResources": [
         {
           "from": "",
           "to": "app-server",
           "filter": [
             "**/*"
           ]
         }
       ],
       "publish": [
         {
           "provider": "generic",
           "url": "reisen"
         }
       ]
     },
     "devDependencies": {
       "electron": "^31.1.0",
       "electron-builder": "^24.13.3"
     },
     "dependencies": {
       "core-js": "^2.4.1",
       "electron-packager": "^12.1.0",
       "electron-updater": "^4.0.0",
       "fs-extra": "^4.0.1",
       "install.js": "^1.0.1",
       "moment": "^2.18.1",
       "moment-es6": "^1.0.0"
     },
     "license": "ISC"
    }

  4. 然后在静态文件夹外面的package.json里修改如下script

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test": "vue-cli-service build --mode test",
     "lint": "vue-cli-service lint",
     "electron_dev": "npm run build && electron main.js",
     "electron_build": "electron-packager ./dist demo --platform=win32 --arch=x64 --overwrite",
      
     "dist": "electron-packager ./dist name --platform=win32 --arch=ia32 --overwrite" 
    }

  5. 最后执行这个electron_build就能完成打包了，打完包能看到一个demo.exe启动就ok了