Electron 开发环境搭建超详细学习笔记

前言

最近开始学习 Electron 桌面应用开发，第一步就是搭建开发环境，过程中整理了详细的操作步骤和避坑点，分享给刚入门的小伙伴，亲测有效，跟着步骤走就能快速完成 Electron 环境配置～

前言

[一、环境准备：安装 Node.js](#一、环境准备：安装 Node.js)

[二、初始化 Electron 项目](#二、初始化 Electron 项目)

[1. 新建项目目录](#1. 新建项目目录)

[2. 初始化 package.json 文件](#2. 初始化 package.json 文件)

[三、安装 Electron 依赖](#三、安装 Electron 依赖)

[四、配置 package.json 并添加启动脚本](#四、配置 package.json 并添加启动脚本)

[1. 完整的 package.json 配置示例](#1. 完整的 package.json 配置示例)

关键配置说明

五、创建入口文件并启动项目

[1. 创建 main.js 入口文件](#1. 创建 main.js 入口文件)

[2. 启动 Electron 项目](#2. 启动 Electron 项目)

六、避坑与优化配置

[1. 解决内容安全策略警告](#1. 解决内容安全策略警告)

[2. 添加多系统兼容代码](#2. 添加多系统兼容代码)

[七、WebStorm 中搭建 Electron 环境](#七、WebStorm 中搭建 Electron 环境)

总结

论文投稿：
第七届地质、测绘与遥感国际学术会议（ICGMRS 2026）

大会官网：https://ais.cn/u/bAveMz

大会时间：2026年4月17-19日

大会地点：中国-浙江-舟山

一、环境准备：安装 Node.js

Electron 基于 Node.js 开发，必须先安装 Node 环境，安装完成后可通过命令行验证是否安装成功。

前往 Node.js 官方网站下载对应系统的安装包，建议安装 LTS 长期支持版
安装完成后，打开终端 / 命令提示符，执行版本查询命令：
- 检查 Node 版本：node -v
- 检查 npm 版本：npm -v若能正常输出版本号，说明 Node.js 安装成功。

二、初始化 Electron 项目

1. 新建项目目录

在电脑任意位置新建文件夹（例如命名为 my-electron-app），通过终端进入该项目目录：

bash 复制代码

cd 项目文件夹路径

2. 初始化 package.json 文件

执行 npm 初始化命令，-y参数表示默认接受所有配置，快速生成 package.json：

bash 复制代码

npm init -y

生成后可根据 Electron 规范修改 package.json 基础配置，核心必填项包括name、version、main、author、description、license等。

三、安装 Electron 依赖

将 Electron 安装为项目的开发依赖，有两个命令可选，若第一个命令安装失败，直接使用第二个即可：

bash 复制代码

# 方式1
npm install --save-dev electron
# 方式2（安装失败时使用）
npm install electron -D

安装完成后，package.json 中会自动添加 Electron 的依赖版本信息（本文中为 ^31.2.0）。

四、配置 package.json 并添加启动脚本

1. 完整的 package.json 配置示例

结合 Electron 规范，整理了可直接复用的 package.json 配置，核心是指定入口文件和启动脚本：

复制代码

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "bin9153",
  "license": "ISC",
  "description": "electron test",
  "dependencies": {
    "electron": "^31.2.0"
  }
}

关键配置说明

main：Electron 的入口文件，规范命名为 main.js，也可自定义为 a.js、b.js 等
scripts：添加start命令，electron .表示启动当前目录的 Electron 项目
其余字段为 Electron 规范必填项，需按实际情况填写

五、创建入口文件并启动项目

1. 创建 main.js 入口文件

在项目根目录下新建main.js文件（与 package.json 中main字段配置一致），这是 Electron 应用的主进程文件，后续可在该文件中编写窗口创建、应用生命周期管理等代码。

2. 启动 Electron 项目

在项目目录的终端中执行启动命令，即可启动 Electron 应用：

bash 复制代码

npm start

六、避坑与优化配置

1. 解决内容安全策略警告

启动后若出现Content-Security-Policy 内容安全策略警告，在项目的index.html文件的<head>标签中添加以下 meta 标签即可解决：

html 复制代码

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';style-src 'self' 'unsafe-inline';img-src self 'data:';">

2. 添加多系统兼容代码

Electron 在 Windows、Linux、macOS 上的应用生命周期行为有差异，在main.js中添加以下代码，实现多系统的窗口行为兼容：

javascript 复制代码

// 关闭所有窗口时退出应用 (Windows & Linux)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// 如果没有窗口打开则打开一个窗口 (macOS)
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

说明：上述代码中createWindow()为自定义的创建窗口函数，需提前在 main.js 中定义。

七、WebStorm 中搭建 Electron 环境

若使用 WebStorm 作为开发工具，可参考 CSDN 的专属教程配置 Electron 开发环境，教程链接：https://blog.csdn.net/men_shuangshuang/article/details/83791935

总结

Electron 环境搭建的核心步骤就是安装 Node.js→初始化项目→安装 Electron 依赖→配置启动脚本→启动项目，重点注意 package.json 的规范配置和多系统兼容代码的添加，以及内容安全策略警告的解决。搭建好基础环境后，就可以开始学习 Electron 的主进程、渲染进程、窗口创建等核心知识点了～

创作不易，若本文对你有帮助，欢迎点赞 + 收藏 + 关注～