2025-08-13

electron环境搭建

# 手戳 electron 简单工程

# 1. 官方脚手架

npm create @quick-start/electron@latest my-app -- --template vue-ts

安装 Electron 生态

# 禁用 npm 证书验证，避免下载electron失败；默认是不禁用：npm config set strict-ssl true
npm config set strict-ssl false

npm i -D electron electron-builder vite-plugin-electron

my-manual-app
├─ dist-electron    # 运行 electron 后的输出目录
├─ electron
│  ├─ main.ts        # 主进程
│  └─ preload.ts     # preload 脚本
├─ src               # Vue3 渲染进程
└─ vite.config.ts

主进程 main.ts

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'
import { app, BrowserWindow, session } from 'electron'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      sandbox: false,
      preload: join(__dirname, 'preload.js') // ✅ 正常运行
    }
  })
  // win.loadFile('dist/index.html')
  win.loadURL('http://localhost:5173')
}

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

  /* 解决跨域
   * Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
   */
  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
          "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
        ]
      }
    })
  })
})

# 5. 预加载 preload.ts

import { contextBridge } from 'electron'
contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron
})

# 6. vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    vue(),
    electron({
      /* entry: 'electron/main.ts',*/
      entry: {
        main: resolve(__dirname, 'electron/main.ts'),
        preload: resolve(__dirname, 'electron/preload.ts')
      }
    })
  ]
})

# 7. 打包[todo]

"build": {
  "appId": "cn.ddcherry",
  "productName": "electronClient",
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true
  },
  "files": [
    "dist/**/*",
    "electron/**/*"
  ],
  "directories": {
    "buildResources": "assets",
    "output": "electron_dist"
  }
}

说明： build 节点：用于设置 Electron 应用程序的打包配置信息； appId：应用程序的唯一标识符，用于在构建过程中识别应用程序； productName：用于指定打包后的应用程序名称； nsis：用于指定 NSIS（Nullsoft Scriptable Install System）安装程序的配置选项。

oneClick：是否启用一键安装，此处设置为 false，表示禁用一键安装； allowToChangeInstallationDirectory：是否允许用户在安装过程中选择安装目录，此处设置为 true，表示允许用户在安装过程中选择安装目录；

files：指定构建应用时需要包含在安装程序中的文件列表，本示例中的配置表示在构建过程中会将 dist 文件夹和 electron 文件夹下的所有文件打包进安装程序中； directories：

buildResources：指定构建过程中资源文件位置； output：指定构建输出文件的目录；

上次更新: 2025-12-04