使用electron打包静态页面

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

   
   npm install electron
   
   

   再安装electron-packager

   npm install electron-packager
   
   

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

    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

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

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