第一章 快速搭建Electron+Vite3+Vue3+TypeScript5脚手架 (无需梯子，快速安装Electron)

一、介绍 😆 😁 😉

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验(这段话是来自官网)。

二、搭建Vite+Vue3+TypeScript项目 😆 😁 😉

根据vite官网文档

yarn create vite

项目创建完成后进入demo目录，执行yarn安装相关依赖

三、安装Electron相关依赖 😆 😁 😉

如果你自己安装过Electron的相关依赖，想必你一定经历过失败、失败、失败。

这里需要借助一个网站检测服务器响应速度，然后拿到最快响应的ip进行本地配置加快我们的域名解析。

通过该工具可以多个地点Ping服务器以检测服务器响应速度。检查github.com。我都选择国内的，看自己想法选择啊。选择之前自己在本地ping一下，通了的话就能使用。

修改 C:\Windows\System32\drivers\etc\hosts

20.27.177.113 github.com

如果设置执行yarn出现RequestError: connect ETIMEDOUT ***.***.***.***:443就更改一下electron安装源

yarn config set electron_mirror https://npmmirror.com/mirrors/electron/

安装electron依赖 👇 👇 👇 👇

yarn add -D electron electron-builder

根据官网提供的文档,需要创建一个BrowserWindow装载vite项目,你也可以写一个html页面。 这里我们启动vite项目以后就会产生一个连接，正好把它装载到 BrowserWindow中。

因为src下面存放的是我们的vite项目，所以在根目录下创建一个electron文件夹，避免后续文件多了以后混淆起来，现在创建这个main.ts就是我们electron的入口文件。名字随便起，知道是干啥的就行。

项目根目录下electron文件夹下创建main.ts文件

const { app, BrowserWindow } = require('electron')
let win

/**
 * @Description: electron程序入口
 * @Author: Etc.End
 * @Copyright: TigerSong
 * @CreationDate 2023-05-20 14:39:26
 */
const createWindow = () => {
    win = new BrowserWindow({
        width: 1200,
        height: 800,
        minWidth: 1200,
        minHeight: 800,
        center: true,
        skipTaskbar: false,
        transparent: false,
        webPreferences: {
            contextIsolation: false,
            webSecurity: false,
        }
    })

    win.loadURL(
        'http://localhost:5173/'
    )

    win.webContents.openDevTools()
}

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

/**
 * @Description: 限制只能打开一个页面
 * @CreationDate 2023-05-20 14:35:52
 */
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
    app.quit()
} else {
    app.on('second-instance', (event, commandLine, workingDirectory) => {
        if (win) {
            if (win.isMinimized()) win.restore()
            win.focus()
        }
    })
}

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

接着修改package.json文件

配置完成以后分别启动yarn dev 和 yarn start，出现以下窗口表示搭建成功了。

四、优化 😆 😁 😉

因为现在需要启动两个服务，比较麻烦，可以借助concurrently插件整合。一个命令完成多个应用的启动。同时安装cross-env插件设置我们的环境变量。wait-on进行一个端口启动监听。

yarn add concurrently wait-on cross-env -D

安装完成以后修改启动和打包命令 

"scripts": {
  "dev": "concurrently -k \"vite\" \"yarn dev:electron\"",
  "dev:electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron .",
  "build": "vite build && electron-builder --win --config",
  "build:mac": "vite build && electron-builder --mac --config",
  "build:linux": "vite build && electron-builder --linux --config"
},

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "electron/main.ts",
  "scripts": {
    "dev": "concurrently -k \"vite\" \"yarn dev:electron\"",
    "dev:electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron .",
    "build": "vite build && electron-builder --win --config",
    "build:mac": "vite build && electron-builder --mac --config",
    "build:linux": "vite build && electron-builder --linux --config"
  },
  "build": {
    "productName": "TigerSong", // 生成的exe文件名
    "copyright": "Copyright @ 2023 TigerSong", //版权
    "directories": { // 输出文件夹
      "output": "dist"
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升
      "allowToChangeInstallationDirectory": true, // 安装时可以修改安装目录
      "createDesktopShortcut": false, // 创建桌面图标
      "createStartMenuShortcut": false // 创建开始菜单图标
    }
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "concurrently": "^8.0.1",
    "cross-env": "^7.0.3",
    "electron": "^24.3.1",
    "electron-builder": "^23.6.0",
    "typescript": "^5.0.2",
    "vite": "^4.3.2",
    "vue-tsc": "^1.4.2",
    "wait-on": "^7.0.1"
  }
}

接着修改我们的electron文件夹下的main.ts文件。

const { app, BrowserWindow } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV
let win

/**
 * @Description: electron程序入口
 * @Author: Etc.End
 * @Copyright: TigerSong
 * @CreationDate 2023-05-20 14:39:26
 */
const createWindow = () => {
    win = new BrowserWindow({
        width: 1200,
        height: 800,
        minWidth: 1200,
        minHeight: 800,
        center: true,
        skipTaskbar: false,
        transparent: false,
        webPreferences: {
            contextIsolation: false,
            webSecurity: false,
        }
    })

    win.loadURL(
        NODE_ENV === 'development' ? 'http://localhost:5173/' : `file://${path.join(__dirname, '../dist/index.html')}`
    )

    if (NODE_ENV === 'development') {
        win.webContents.openDevTools()
    }
}

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

/**
 * @Description: 限制只能打开一个页面
 * @CreationDate 2023-05-20 14:35:52
 */
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
    app.quit()
} else {
    app.on('second-instance', (event, commandLine, workingDirectory) => {
        if (win) {
            if (win.isMinimized()) win.restore()
            win.focus()
        }
    })
}

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

执行yarn dev 进行检测，出现下面的内容表示配置成功，基础脚手架就已经搭建完成了。

接着测试我们的打包是否正常。

修改vite.config.ts

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

export default defineConfig({
  base: './',
  plugins: [vue()],
})

执行yarn build，这个第一次可能优点慢，看自己的网速如何了。也可能会出现连接失败，下载失败的情况，多尝试几次。

像上面一样就说明我们已经打包成功了。打开程序

运行起来后出现下图表示我们的打包已没有任何问题了。

dist目录下还有生成的安装程序，可以拷贝至其他目录进行自定义安装。到此我们的程序已经搭建结束了，接着下一篇开始讲解如何使用electron进行爬虫实现自己音乐播放器。感兴趣的小伙伴可以关注我的Electron专栏，在不断更新中。

我是Etc.End。如果文章对你有所帮助，能否帮我点个免费的赞和收藏😍。

 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇