目录

一、创建Electron Forge项目

二、集成React

三、安全相关Warning解决

四、Typescript相关配置

五、Vite配置

六、图片注意事项

一、创建Electron Forge项目

官方文档：Getting Started | Electron Forge

npx create-electron-app@latest my-app

选择：typescript、vite、最新版本

"start": "electron-forge start",    
"package": "electron-forge package",
"make": "electron-forge make",

项目自带了3个核心脚本命令，publish可以直接忽略掉（基本用不到），

start ：启动项目;

package: 测试打包（开发阶段最常用）

特点：✅ 速度快（比 make 快 50%），适合开发中频繁验证；✅ 产物可直接运行（双击文件夹内的 exe/dmg 即可启动应用），无需安装；✅ 无安装引导、无桌面快捷方式、无卸载功能，仅自己测试用。

make: 生产打包（交付用户必用）

特点：✅ 会根据 electron-forge.config.js 中 makers 配置，生成对应平台的安装包（Windows=exe、Mac=dmg、Linux=deb）；✅ 产物带完整的安装 / 卸载逻辑（如安装时创建桌面快捷方式、卸载时清理文件）；✅ 是最终分发给用户的产物，适合对外交付。

package 和 make 命令均可打包生成 PC 端的安装包文件，但这类命令仅能为当前操作系统打包对应版本的安装包；若需同时完成 Windows、macOS、Linux 三大平台的安装包打包，原本需要配备三台对应系统的电脑，可通过虚拟机、云服务器、多设备部署或云打包平台这几种方式解决。

二、集成React

react核心依赖：

yarn add react react-dom

ts项目必装类型：

yarn add @types/react @types/react-dom --dev

在/src下创建App.tsx

export default function App() {
  return (
    <div style={{ padding: 20, fontFamily: 'Arial' }}>
      <h1>✅ Electron + React + TypeScript 集成成功</h1>
      <p>基于 Yarn 4.x + Electron Forge + Vite 构建</p>
      <p>{import.meta.env.MODE}</p>
    </div>
  );
}

/src/render.tsx

/**
 * This file will automatically be loaded by vite and run in the "renderer" context.
 * To learn more about the differences between the "main" and the "renderer" context in
 * Electron, visit:
 *
 * https://electronjs.org/docs/tutorial/process-model
 *
 * By default, Node.js integration in this file is disabled. When enabling Node.js integration
 * in a renderer process, please be aware of potential security implications. You can read
 * more about security risks here:
 *
 * https://electronjs.org/docs/tutorial/security
 *
 * To enable Node.js integration in this file, open up `main.ts` and enable the `nodeIntegration`
 * flag:
 *
 * ```
 *  // Create the browser window.
 *  mainWindow = new BrowserWindow({
 *    width: 800,
 *    height: 600,
 *    webPreferences: {
 *      nodeIntegration: true
 *    }
 *  });
 * ```
 */

import { createRoot } from 'react-dom/client';
import App from './App';
import { StrictMode } from 'react';

const rootElement = document.getElementById('root');
if (rootElement) {
  const root = createRoot(rootElement);
  root.render(
    <StrictMode>
      <App />
    </StrictMode>
  );
} else {
  console.error('❌ 未找到 id 为 root 的 DOM 节点，请检查 HTML 模板');
}

在index.html里加入根节点

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>XLODA</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="module" src="/src/renderer.tsx"></script>
</html>

yarn run start启动项目，发现启动正常，页面正常。到这里集成react成功。

三、安全相关Warning解决

启动项目后，你可能看到控制台会有这个warning。

解决方案如下：

/src/main.ts替换：

index.html加标签，生产环境和测试环境都能很好的适配！

<meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://cdn.deepseek.com; font-src 'self' data:; connect-src 'self'; media-src 'self'; object-src 'none'; frame-src 'none'; base-uri 'self'; form-action 'self'"
    />

完整版：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>XLODA</title>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://cdn.deepseek.com; font-src 'self' data:; connect-src 'self'; media-src 'self'; object-src 'none'; frame-src 'none'; base-uri 'self'; form-action 'self'"
    />
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script type="module" src="/src/renderer.tsx"></script>
</html>

安全相关warning完美解决。

四、Typescript相关配置

tsconfig.json的配置：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] },
    "resolveJsonModule": true,
    "strict": true,
    "types": ["vite/client"],
    "isolatedModules": true,
    "verbatimModuleSyntax": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "dist", "out"],
  "ts-node": {
    "compilerOptions": { "module": "CommonJS" }
  }
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended' // 必须放在最后，关闭冲突规则
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint'],
  settings: {
    react: {
      version: 'detect'
    }
  },
  rules: {
    // === 匹配你的 Prettier 偏好 ===
    semi: ['error', 'always'], // ✓ 改为有分号
    'comma-dangle': ['error', 'never'], // 无尾随逗号
    'arrow-parens': ['error', 'as-needed'], // 箭头函数括号精简

    // === React 规则 ===
    'react/react-in-jsx-scope': 'off', // React 17+ 不需要引入
    'react/prop-types': 'off', // TypeScript 项目不需要

    // === 代码质量 ===
    'no-console': 'warn',
    'dot-notation': 'error',
    'no-unused-vars': 'off', // 使用 TypeScript 的规则
    '@typescript-eslint/no-unused-vars': ['error'],

    // === 简化规则 ===
    quotes: ['error', 'single'], // 单引号
    'jsx-quotes': ['error', 'prefer-double'], // JSX 双引号

    'no-useless-escape': 'off',
    '@typescript-eslint/no-empty-function': 'off'
  }
};

Prettier可以按需加入，官方文档：Install · Prettier

你可能需要加入的依赖

# 安装 react 相关插件
yarn add eslint-plugin-react eslint-plugin-react-hooks --dev

# 安装 prettier 相关插件（配置中用到了 plugin:prettier/recommended）
yarn add eslint-plugin-prettier eslint-config-prettier --dev

执行脚本：

"lint": "eslint src/**/*.{ts,tsx} ./*.{ts,tsx} --ignore-path .eslintignore",

.eslintignore文件你可以自定义。

五、Vite配置

vite.renderer.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig(() => {
  return {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      }
    },
    plugins: [react()],
    root: path.resolve(__dirname, './'), // 指向项目根目录
    publicDir: 'public',
    // 适配 Electron 开发环境的 Vite 服务配置（避免端口/主机冲突）
    server: {
      host: 'localhost',
      port: 5173,
      strictPort: true,
      // 禁用 CORS 预检，避免 Electron 加载资源时跨域拦截
      cors: true
    }
  };
});

六、图片注意事项

使用本地图片时一定要用导入的方式，否则打包出来图片可能无法正常显示（开发环境正常，打包后就有问题）。

图片正确的使用方式：

import FAVICON from '@/assets/images/logos/favicon.png';
import PRIMARY from '@/assets/images/logos/logo-primary.png';
import WHITE from '@/assets/images/logos/logo-white.png';

export const LOGOS = {
  FAVICON,
  PRIMARY,
  WHITE
};

最终完成electron项目的初始化！

# electron # react.js # typescript # javascript # 前端 # reactjs
Logo
腾讯云开发者社区

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

更多推荐

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

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

avatar 腾讯云开发者社区

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

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

avatar 腾讯云开发者社区

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

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

avatar 腾讯云开发者社区