HTML、JS、CSS作为依托浏览器运行的脚本语言，常被用来作为后端程序的可视化页面。HTML具有语义简单、能够独立运行、运行方便等优点。缺点是依托于电脑配置，继而影响浏览器运行效率；本地文件的访问存在安全限制，继而文件过大会导致运行错误。但单个文件不超过约600M（可多个）可以运行（亲测）。

        简单的页面可视化方便无代码基础的群众用来资源搜索，如新闻、商品、资源（影音、图片等）；但随着AI技术的强大，HTML程序用于轻量数据的在线可视化分析，相较于Python可视化更为简单、易修改，但性能不如Python。这里使用AI生成的代码用于可视化数据（曲线图），以下为我的项目文件结构，主文件为POST.html（可在浏览器运行）。

一、搭建文件目录

your-app/
├── POST.html       # 你的页面（支持内嵌CSS、本地JS、图片）
├── main.js          # Electron 主进程（固定不动）
├── package.json     # 配置文件
└── /assets          # 放你的 CSS、JS、图片等
    ├── style.css
    └── script.js

    1. package.json（项目配置）

{
  "name": "html-to-exe",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --win",
    "build": "electron-builder --win --dir"
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.9.0"
  },
  "build": {
    "appId": "com.html.exe",
    "win": {
      "target": "nsis",
      "icon": "icon.ico"
    },
    "files": [
      "**/*"
    ]
  }
}

2. main.js（Electron 入口）

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

let win

function createWindow() {
  win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      enableRemoteModule: false
    }
  })

  // 加载本地 HTML
  win.loadFile('index.html')

  // 所有外链自动用系统浏览器打开（安全）
  win.webContents.setWindowOpenHandler(({ url }) => {
    shell.openExternal(url)
    return { action: 'deny' }
  })
}

app.whenReady().then(createWindow)

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

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

3. POST.html（你的页面，支持本地 CSS/JS）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的HTML转EXE</title>
  <!-- 引入外部CSS ✅ 支持 -->
  <link rel="stylesheet" href="./assets/style.css">
</head>
<body>
  <h1>Electron 打包 HTML 成功！</h1>
  <!-- 引入外部JS ✅ 支持 -->
  <script src="./assets/script.js"></script>
</body>
</html>

二、下载打包资源

        HTML的打包分为使用工具打包和本地打包，无疑我们防止走弯路，直接选择本地打包（需联网下载打包资源）。本目录下输入cmd进入计算机的指令页面。

        首先下载npm（先别运行）。

# 1. 安装依赖
npm install

# 2. 测试运行（看是否正常显示）
npm start

# 3. 打包成 EXE（最终文件在 dist 文件夹）
npm run pack

        正常来讲这里就结束了。但如果你不慎运行错误，那是因为npm作为国外资源直接下载会出错，因此需重新安装npm。

        先删掉报错的 node_modules文件夹，然后执行这4 条命令：

# 1. 清空 npm 缓存（必须）
npm cache clean -f

# 2. 使用国内镜像安装（100%成功）
npm install --registry=https://registry.npmmirror.com --electron-mirror=https://npmmirror.com/mirrors/electron/

# 3. 测试运行（看是否正常显示）
npm start

# 4. 打包成 EXE（最终文件在 dist 文件夹）
npm run pack

        正常来讲这里可能结束了，但如果你不慎又运行错误，只能再建立一个文本并命名为.npmrc（后缀为npmrc，名为空），内容如下（相当于多了几个下载源）：

registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

        然后再执行即可成功：

# 1. 安装依赖
npm install

# 2. 测试运行（看是否正常显示）
npm start

# 3. 打包成 EXE（最终文件在 dist 文件夹）
npm run pack

        最后你可在dist文件夹下看到你要的EXE：

# electron # javascript # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

avatar 腾讯云开发者社区

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

avatar 腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git

avatar 腾讯云开发者社区