How to pack an html webpage such as html, js, css into a single exe executable program file?

To package HTML, JS, CSS, etc. files into a single executable program file, tools such as Electron can be used.

Electron is a framework for building desktop applications using Node.js and Chromium, which allows you to use web technologies (HTML, JS, CSS, etc.) to build cross-platform desktop applications. Electron can package your web application into a single executable file and supports multiple platforms such as Windows, macOS and Linux.

Here are the steps to package a simple web application with Electron:

1. Install Electron in your project: npm install electron --save-dev

2. Create a main.js file in which to write the main logic of the Electron application. For example:

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false,
      preload: __dirname + '/preload.js'
    }
  })

  win.loadFile('index.html')
}

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

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

3. Create a package.json file in your project root directory, and specify your application name, version number, description, entry file and other information in it. For example:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "My Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Your Name",
  "license": "MIT"
}

4. Run npm start on the command line to start your Electron application.

5. Use tools such as electron-builder to package your Electron application into an executable file. For example, running npx electron-builder --win on the command line will package your application into a Windows executable.

In this way, you can package HTML, JS, CSS and other files into a single executable program file.

Guess you like

Origin blog.csdn.net/m0_72605743/article/details/130017796