Electron项目的搭建和electron-builder打包

electron简单项目目录结构


index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <link rel="stylesheet" href="./app.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script src="./app.js" type="text/javascript"></script>
  </body>
</html>

package.json

{
  "name": "my-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.1.1"
  }
}

main.js

const {app, BrowserWindow} = require('electron');

function createWindow() {
  // 创建浏览器窗口。
  const win = new BrowserWindow({
     1280,
    height: 720,
    webPreferences: {
      nodeIntegration: true,
    },
    autoHideMenuBar: true,  // 默认隐藏菜单栏
    fullscreen: true,       // 默认全屏
  });

  // 加载index.html文件
  win.loadFile('index.html');
}

// Electron 会在初始化后并准备创建浏览器窗口时,调用这个函数。部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});
  1. 文件浏览器的demo: https://github.com/tugenhua0707/electron-demo/

  2. 打包命令: electron-builder --win
    下载electron-builder: npm install electron-builder global


package.json

{
  "name": "window-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win"
  },
  "build": {
    "appId": "com.example.app",
    "directories": {
      "output": "dist"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./icon.ico",
      "installerHeaderIcon": "./icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "123"
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    }
  },
  "keywords": [],
  "author": "kongzhi",
  "license": "ISC",
  "dependencies": {
    "electron": "^11.1.1"
  },
  "devDependencies": {
    "async": "^3.2.0"
  }
}
原文地址:https://www.cnblogs.com/nangezi/p/14495729.html