首页

# Electron + ts + vue3 + vite 项目搭建

Electron 是一个基于 Chromium 和 Node.js 的桌面应用程序开发框架，而 Vue3 则是一种流行的前端框架。将两者结合使用可以快速地打造出跨平台的桌面应用程序。在这种组合中，Electron 提供了强大的桌面应用开发能力，而 Vue3 则提供了易用的 UI 组件和开发体验。

# 创建

# 安装

npm create vite@latest electron-vue3-ts-vite-test1

VSCode 打开 electron-vue3-ts-vite-test1 或者 cd electron-vue3-ts-vite-test1

npm install //完成初始化
npm run dev //试运行确认是否有问题

出现相应的界面就代表这步成功

# 安装 electron 的相关依赖

//安装electron
npm install electron -D
//打包工具
npm install electron-builder -D
//开发工具
npm install electron-devtools-installer -D
//集成Vite和Electron，方便后续在渲染进程中使用Node API或Electron API
npm install vite-plugin-electron -D
npm install vite-plugin-electron-renderer -D
 
//快速删除某些文件和文件夹
npm install rimraf -D

初始化一个基本项目后，我们需要在项目中安装一些关于 electron 的包。

下面的依赖可能会安装不成功，两种方式第一种直接使用 cnpm 安装依赖；第二种创建文件.npmrc

registry "https://registry.npm.taobao.org/"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror "http://npm.taobao.org/mirrors/electron-builder-binaries/"

指定仓库安装

安装 electron ：

npm install electron -D

安装 electron-builder ：

//打包工具
npm install electron-builder -D

安装 electron-devtools-installer ：

//开发工具
npm install electron-devtools-installer -D

安装 vite-plugin-electron ：

//集成Vite和Electron，方便后续在渲染进程中使用Node API或Electron API
npm install vite-plugin-electron -D
npm install vite-plugin-electron-renderer -D

安装 rimraf ：

//快速删除某些文件和文件夹
npm install rimraf -D

# 配置 electron

在项目的根目录下新建 electron-main 文件夹，之后新建 index.ts，配置如下：

// electron-main/index.ts
import { app, BrowserWindow } from "electron"
import path from "path"
 
const createWindow = () => {
  const win = new BrowserWindow({
    webPreferences: {
      contextIsolation: false, // 是否开启隔离上下文
      nodeIntegration: true, // 渲染进程使用 Node API
      preload: path.join(__dirname, "./preload.js"), // 需要引用 js 文件
    },
  })
 
  // 如果打包了，渲染 index.html
  if (process.env.NODE_ENV !== 'development') {
    win.loadFile(path.join(__dirname, "./index.html"))
    win.webContents.openDevTools()
  } else {
    let url = "http://localhost:5173" // 本地启动的 vue 项目路径。注意：vite 版本 3 以上使用的端口 5173；版本 2 用的是 3000
    win.loadURL(url)
    win.webContents.openDevTools()
  }
}
 
app.whenReady().then(() => {
  createWindow() // 创建窗口
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 关闭窗口
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit()
  }
})

项目根目录创建 electron-preload 目录，在 electron-preload 目录新建 preload.ts 文件，参考示例代码如下：

注意避坑：preload.ts 不要与 preload-main 中的 index.ts 同名，

// electron-preload/preload.ts
import os from "os";
console.log("platform", os.platform());

# 修改项目配置文件

# 修改 tsconfig.json

增加 electron 相关的监听，增加配置内容如下， electron-main/**/*.ts 及 electron-preload/**/*.ts 为新增配置

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","electron-main/**/*.ts","electron-preload/**/*.ts"],

# 修改 vite.config.ts

虽然我们建好了 electron 的主进程文件和预加载文件，但是如果我们不做任何处理，这两个文件就和普通的脚本文件没有任何区别了。所以我们需要修改 vite.config.ts 配置文件，以此将 electron 和 vite 项目结合起来。

【补充说明】：

electron () 是可以传入数组对象的，网上很多教程或者案例都是传入对象，导致很多小伙伴只知道 electron-main/index.ts (对应 electron 项目 main.js) 怎么配，而不知道 perload.js 怎么配。

electron () 支持传递数组，因而可以配置 main 及 preload 入口，但由于统一输出到 outDir: "dist-electron" 同一个目录，由此 main 及 preload 不建议创建同名的 ts 文件，否则会有冲突

outDir: "dist-electron" 交代了输出地址

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
import electron from "vite-plugin-electron"
import electronRenderer from "vite-plugin-electron-renderer" 
import polyfillExports from "vite-plugin-electron-renderer" 
 
export default defineConfig(({ mode }) => ({
  base: mode == 'development' ? '' : './',
  plugins: [
    vue(),
    electron([{
      entry: "electron-main/index.ts", // 主进程文件
    },
    {
      entry: 'electron-preload/preload.ts'
    }
  ]),
    electronRenderer(),
    polyfillExports(),
  ],
  build: {
    emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录
    outDir: "dist-electron"
  },
}))

# 修改 package.json 文件

  • 删除 "type":"module"
  • 增加 "main": "dist-electron/index.js"
  • "build" 修改为 "build": "rimraf dist-electron && vite build && electron-builder"
  • 修改 dev 运行命令，增加 chcp 65001 支持中文显示，"scripts":
  • （如果不涉及打包，可以不配置）增加配置 build 配置（配置 build 才能打包成功，具体含义可以官网查询），注意 files 及 output 配置的路径，files 打包关联路径，output 为后续包生成路径
# appId、productName... —— 应用基本信息信息
# win、mac —— 不同类型设备配置

nsis —— 桌面应用程序安装过程的配置

{
  "name": "electron-vue3-ts-vite-test1",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/index.js", 
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && rimraf dist-electron && vite build && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "electron": "^25.2.0",
    "electron-builder": "^24.4.0",
    "electron-devtools-installer": "^3.2.0",
    "rimraf": "^5.0.1",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vite-plugin-electron": "^0.12.0",
    "vite-plugin-electron-renderer": "^0.14.5",
    "vue-tsc": "^1.4.2"
  },
  "build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright © 2022 electron",
    "directories": {
      "output": "release/${version}"
    },
    "files": [
      "./dist",
      "./package.json",
      "./dist-electron"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具体内容"
    }
  }
}

nsis（桌面应用程序安装过程）配置一览

{ 
  // 一键安装程序、或者辅助安装程序（默认是一键安装）
  "oneClick": false,
  // 是否允许请求提升，如果为 false，则用户必须使用提升的权限重新启动安装程序（仅作用于辅助安装程序）
  "allowElevation": true, 
  // 是否允许修改安装目录（仅作用于辅助安装程序）
  "allowToChangeInstallationDirectory": true,
  // 安装程序图标的路径
  "installerIcon": "public/timg.ico",
  // 卸载程序图标的路径
  "uninstallerIcon": "public/timg.ico",
  // 安装时头部图片路径（仅作用于辅助安装程序）
  "installerHeader": "public/timg.ico",
  // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
  "installerHeaderIcon": "public/timg.ico",
  // 安装完毕界面图片的路径，图片后缀.bmp，尺寸 164*314（仅作用于辅助安装程序）
  "installerSidebar": "public/installerSiddebar.bmp",
  // 开始卸载界面图片的路径，图片后缀.bmp，尺寸 164*314（仅作用于辅助安装程序）
  "uninstallerSidebar": "public/uninstallerSiddebar.bmp",
  // 控制面板中的卸载程序显示名称
  "uninstallDisplayName": "${productName}${version}",
  // 是否创建桌面快捷方式
  "createDesktopShortcut": true,
  // 是否创建开始菜单快捷方式
  "createStartMenuShortcut": true,
  // 用于快捷方式的名称，默认为应用程序名称
  "shortcutName": "TestApp",
  // NSIS 包含定制安装程序脚本的路径，安装过程中自行调用 (可用于写入注册表 开机自启动等操作)
  "include": "script/installer.nsi",
  // 用于自定义安装程序的 NSIS 脚本的路径
  "script": "script/installer.nsi",
  // 是否在卸载时删除应用程序数据（仅作用于一键安装程序）
  "deleteAppDataOnUninstall": false,
  // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）
  "runAfterFinish": true,
  // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为 true，则使用公司名称
  "menuCategory": false,
}

# 修改.gitignore

增加忽略 dist-electron

# 运行测试

# dev 测试：

npm run dev （由于有 vite 加持，支持 hotreload，无需额外配置）

# 打包测试（还未操作）：

参考：https://blog.csdn.net/mo911108/article/details/131456698

更新于 阅读次数 次

请我喝[茶]~(￣▽￣)~*

Davaded 微信支付

微信支付

Davaded 支付宝

支付宝

Davaded 贝宝

贝宝