Electron+Vue3+Vite+ElectronForge整合 - 一键启动两个服务 & 一键打包两个服务

NorthCastle2024-05-09 15:31

说明

本文介绍一下 Electron + Vue3 + Vite + Electron Forge 的高级整合操作。

vue3 : 使用 TS 的语法开发；
Electron : 使用 JS 的语法开发。

本文将从项目初始化开始，一步一步的完成项目的启动、打包全流程的介绍。

实现的效果是 ：
1、一个正常的Vue3项目；

2、整合加入 Electron 框架 ：
	 开发时 Electron 加载的是开发的vue项目；
	 【实现一键启动 vue3 项目 + electron 项目】
	 
3、整合加入Electron Forge ，完成打包时整合：
	3.1 先完成vue3项目的正常打包；
	3.2 再完成 electron 项目的打包。
	【实现 一键完成 vue3 项目打包 + electron 项目打包】

实现思路介绍

一键启动实现思路

核心思路 ： electron 启动时，需要加载 vue3 的服务，即需要在启动electron时，将vue3的服务地址获取到。

实现方案：
	1、通过 vite 的自定义插件 + configureServer 钩子，获取vue3 的服务地址；
	2、获取到vue3 的服务地址后，通过 node 的 子进程 spawn 的方式，启动electron服务，并将 该地址作为进程参数传递给 electron 进程；
	3、通过以上两个连续的操作，实现项目的一键启动。

特殊配置 ： 
	需要 配置环境变量。
	electron 启动服务时，需要根据环境变量的配置情况，确定是加载开发环境的服务地址 or 正式环境的文件地址。

一键打包实现思路

electron 打包需求 ： 需要加载 一个 index.html 的页面。
而我们的 index.html 页面，此时，就是 vue3 项目打包后的那个 index.html。


核心思路 ： 将 vue3 的打包输出目录，直接放到 Electron 的开发目录下；然后执行electron的打包动作。

实现方案：
	1、通过 vite 的自定义插件 + closeBundle 钩子，在vue项目打包完成之后，执行electron的打包动作即可。
	2、特殊配置 ： 需要将 vue3 的输出目录，配置到electron的目录中。

下面，从零开始，进行项目的搭建。

步骤一：创建vue3项目

常规操作，不再赘述。

shell 复制代码 
# 创建项目
npm create vue@latest

# 进入到项目目录
cd <your project dir>

# 安装依赖
npm install

# 启动访问
npm run dev

正经的vue项目启动成功！

此时的项目目录结构如下：是一个标准的vue3的项目结构

projectName
	| -- node_modules        # 依赖包的位置
	| -- public              # 一些静态资源
	| -- src                 # vue的源文件目录
	| -- .gitignore          # git忽略配置文件 
	| -- env.d.ts            
	| -- index.html          # vue主页面
	| -- package.json        # 项目依赖配置文件
	| -- tsconfig.app.json   # 定义项目中其他文件的ts编译规则
	| -- tsconfig.json       # typescript 配置文件
	| -- tsconfig.node.json  # 配置vite.config.ts文件的编译规则
	| -- vite.config.ts      # vite 配置文件

特殊操作 ： .gitignore 中添加 以下两个 目录，无需纳入版本管理
out ： electron 的打包目录。
electron/pages : vue3 的打包文件的存放目录

步骤二 ：引入Electron

1、安装Electron

shell 复制代码 
# 安装Electron
npm install --save-dev electron

2、项目根目录下创建一个electron的工作目录

shell 复制代码 
# 进入到项目的根目录
cd <your project name>

# 创建electron目录
mkdir electron

3、在electron目录下创建主进程 electronMain.js 文件

主要干了两个事儿 ： 1.创建主窗口；2.加载vue的页面进来（此时加载的还是开发时的路径）。

js 复制代码 
/**
 * electron 的主进程
 */
// 导入模块
const { app, BrowserWindow  } = require('electron')

// 创建主窗口
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })
  // 加载当前vue 的地址
  win.loadURL('http://localhost:5173')

}

// 应用准备就绪，加载窗口
app.whenReady().then(() => {

 	console.log('electronMain.js : ready')
 	
    createWindow()

    // mac 上默认保留一个窗口
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })

    console.log('--- app ready ---')
})

// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

4、修改package.json 文件内容

主要是 ：

1.配置 electron 的启动时加载的住进程文件，就是 "main" 的属性值；

2.配置 vue项目的启动脚本；

3.配置electron的启动脚本。

4.删除文件中的 type:"module" 行，否则会有一个警告！

json 复制代码 
{
   // 其他的基础配置
   .....
 
  "main": "electron/electronMain.js",  // 指定 electron 的主进程文件
  "scripts": {
    "dev:vue": "vite",  // 指定 vue 启动脚本
    "dev:electron":"electron .",  // 指定 electron 启动脚本
    ......
  },
  
  // ......
}

至此，项目目录如下 ：

projectName
	| -- electron                # 【新增的electron的主目录】
		| -- electronMain.js 
	| -- node_modules            # 依赖包的位置
	| -- public                  # 一些静态资源
	| -- src                     # 源文件目录
	| -- .gitignore              # git忽略配置文件 
	| -- env.d.ts            
	| -- index.html              # vue主页面
	| -- package.json            # 项目配置文件
	| -- tsconfig.app.json       # 定义项目中其他文件的ts编译规则
	| -- tsconfig.json           # typescript 配置文件
	| -- tsconfig.node.json      # 配置vite.config.ts文件的编译规则
	| -- vite.config.ts          # vite 配置文件

步骤三：启动项目测试

注意 ： 因为我们目前是两个服务，所以，我们需要在两个独立的 命令行中分别启动项目。

1.启动vue

shell 复制代码 
npm run dev:vue

页面独立访问：ok!

2.启动electron

shell 复制代码 
npm run dev:electron

启动的app中也成功加载vue3的开发页面，且是热更新的。

至此 vue3 + electron 的 开发时的基础整合步骤就完成了。

下面我们开始进行 【一键启动】& 【一键打包】的整合操作。

步骤四 ： 环境变量配置文件准备（重点）

1.在开发环境时，vue 中的路由需要用这个 history 模式；而在打包正式环境时，需要用到 hash 模式；

2.在开发环境时，electron 需要加载的是 vue 的服务路径；而在打包正式环境时，electron需要加载 vue 打包后的 index.html 文件。

基于以上两点，我们进行 环境变量 的配置。使我们的应用会根据运行时的环境，自动加载正确的内容。

1、操作步骤

1、在项目的根目录创建环境变量文件目录 environmentconfig
2、在该目录下 创建三个文件：
    .env    		   (全局通用的环境变量)
    .env.development  （开发环境的环境变量）
    .env.productrion  （生产环境的环境变量）
3、在配置文件中添加一个 名为 【VITE_ENV】 的变量，用于标识当前是什么环境。

2、具体的文件内容

.env

这个文件中随便添加了一个变量，我们用不到，只是展示一下写法。

env 复制代码 
# 全局的环境变量
VITE_HELLO=HELLO WORLD

.env.development

这个是开发时用的变量，很关键。
路由模式选择、electron 运行/打包 时加载的内容，都是通过这个变量进行控制的！

env 复制代码 
# 开发环境的参数配置
VITE_ENV=DEVELOPMENT

.env.production

这个是打包生产环境时用的变量，很关键。
路由模式选择、electron 运行/打包 时加载的内容，都是通过这个变量进行控制的！

env 复制代码 
# 正式环境的参数配置
VITE_ENV=PRODUCTION

3、至此的目录结构

到这一步完成，我们的目录结构如下 ：

projectName
	| -- electron               # 【electron的主目录】
		| -- electronMain.js 
	| -- environmentconfig      # 【新增的 环境变量的配置目录】
		| -- .env
		| -- .env.development
		| -- .env.production
	| -- node_modules            # 依赖包的位置
	| -- public                  # 一些静态资源
	| -- src                     # 源文件目录
	| -- .gitignore              # git忽略配置文件 
	| -- env.d.ts            
	| -- index.html              # vue主页面
	| -- package.json            # 项目配置文件
	| -- tsconfig.app.json       # 定义项目中其他文件的ts编译规则
	| -- tsconfig.json           # typescript 配置文件
	| -- tsconfig.node.json      # 配置vite.config.ts文件的编译规则
	| -- vite.config.ts          # vite 配置文件

步骤五 ： vite 配置文件重构（重点）

本步骤，主要是将 vite 的配置文件，根据，开发环境 与 生产环境 相互独立开来。

这样方便我们后续对项目的配置。

1、操作步骤

1、在项目的根目录创建vite的配置文件目录 viteconfig
2、在该目录下 创建三个文件：
    vite.base.config.ts   (全局通用的vite配置)
    vite.dev.config.ts   （开发环境的vite配置）
    vite.prod.config.ts  （生产环境的vite配置）
3、将原来 根目录下的 vite.config.ts 重命名为 【vite.config.mts】
4、将原来 根目录下的 vite.config.ts 的内容修改为按【运行环境】加载不同的配置文件

2、具体的文件内容

vite.base.config.ts

全局通用的 vite 配置 : 此时需要指定 【上面环境变量文件的路径】

ts 复制代码 
// vite 的通用配置

import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'

import { defineConfig } from "vite"
console.log('load base-config...')
export default defineConfig({

    plugins: [
        vue(),
    ],

    // 指定参数配置的文件目录(比较关键)
    envDir:'environmentconfig',

    resolve: {
        alias: {
        '@': fileURLToPath(new URL('../src', import.meta.url))
        }
    },
   
})

vite.dev.config.ts

开发环境用到的 vite 配置 : 主要指定了一下 开发环境 vue 的服务端口号

ts 复制代码 
// vite 的开发环境的配置

import { defineConfig } from "vite"
console.log('load dev-config...')

export default defineConfig({
   
        // 指定一下访问的服务端口
        server:{
            port:5179
        }
})

vite.prod.config.ts

生产环境用到的 vite 配置 :

1、指定打包时的base路径为相对路径！（重要）

2、指定vue3项目的打包输出路径到 electron的目录下，这样electron 可以直接打包了就。（重要）

ts 复制代码 
// vite 的生产环境的配置

import { defineConfig } from "vite"
console.log('load prod-config...')

export default defineConfig({

    // 配置打包相关的属性
    base:'./',
    build:{
        outDir:'electron/pages'
    }
})

vite.config.mts

根目录下的vite启动配置 ： 根据不同的运行参数加载不同的配置文件。

下面的文件内容中，保留了许多 console.log() 语句，可以帮助我们调试确定环境加载是否正确。

ts 复制代码 
// vite 的根配置 ： 根据不同的运行参数，读取不同的配置文件
import { defineConfig, loadEnv } from "vite"

// 引入三个环境配置文件
import ViteBaseConfig from "./viteconfig/vite.base.config"
import ViteProdConfig from "./viteconfig/vite.prod.config"
import ViteDevConfig from "./viteconfig/vite.dev.config"
import path from "path"

// 策略模式做一个动态的配置
const envResolver = {
    "build":()=>{
        console.log("加载生产环境 : ")
        // 解构的语法
        return ({...ViteBaseConfig,...ViteProdConfig})
    },
    "serve":()=>{
        console.log("加载开发环境 : ")
        // 另一种写法
        return Object.assign({},ViteBaseConfig,ViteDevConfig)
    }
}

// 根据 参数 command 的值，使用不同的环境配置文件
export default defineConfig(({command,mode})=>{
   /console.log("vite start : command : ",command)
    console.log("vite start : mode : ",mode)
    console.log("process.cwd() : ",process.cwd())
    console.log("__dirname: ",__dirname)
    console.log("envdir ： ",path.resolve(process.cwd(),'./environmentconfig'))

     // 加载不同环境下的参数
     const envParams = loadEnv(mode,path.resolve(process.cwd(),'./environmentconfig'))

    // 根据不同的环境使用不同的配置文件,注意这个地方的写法，非常的奇特
    return envResolver[command]()
})

3、修改 tsconfig.node.ts文件

此步骤的目的是 为了 解决 vite.config.mts文件中 导入 三个 vite 配置文件提示报错的问题。

其实，只需要将 viteconfig 这个目录添加到 includes 属性下即可。

下面是tsconfig.node.ts 文件中添加的内容：

ts 复制代码 
{
  .....
  "include": [
     ......
     // 添加 viteconfig 目录
    "viteconfig/*"
  ],
   ......
}

4、至此的目录结构

到这一步完成，我们的目录结构如下 ：

projectName
	| -- electron               # 【electron的主目录】
		| -- electronMain.js 
	| -- environmentconfig      # 【环境变量的配置目录】
		| -- .env
		| -- .env.development
		| -- .env.production
	| -- node_modules            # 依赖包的位置
	| -- public                  # 一些静态资源
	| -- src                     # 源文件目录
	| -- viteconfig              #【新增的 vite 配置目录】
		| -- vite.base.config.ts
		| -- vite.dev.config.ts
		| -- vite.prod.config.ts
	| -- .gitignore              # git忽略配置文件 
	| -- env.d.ts            
	| -- index.html              # vue主页面
	| -- package.json            # 项目配置文件
	| -- tsconfig.app.json       # 定义项目中其他文件的ts编译规则
	| -- tsconfig.json           # typescript 配置文件
	| -- tsconfig.node.json      # 配置vite.config.ts文件的编译规则
	| -- vite.config.mts          # 【vite 的根目录配置文件】

步骤六 ： 一键启动 配置 （难点）

实现思路 ：

1、先启动 vue3 的服务

2、自定义一个vite插件，监听 vue3 的服务启动，并获取启动的端口号；

3、将 【vue3 的服务访问地址】 和 【环境变量】 作为参数，通过 进程传参的方式，传递给 【electron的主进程】；

4、启动electron 。

1、创建自定义插件

在 项目根目录下，创建 plugins 目录，用于存放 自定义的插件。

在 plugins 目录下，创建 vite.dev.plugin.ts 文件, 就是我们要写的插件。

插件内容如下 ：可以直接复制使用！

ts 复制代码 
// 开发环境的自定义插件

import { loadEnv, type Plugin } from "vite";

import type { AddressInfo } from "net";
// 导入子进程
import {ChildProcess, spawn} from 'child_process'
// 导入electron命令
import electron from 'electron'
// 导入 文件操作
import fs from 'fs'
import path from "path";

// 自定义的插件的逻辑
export const ElectronDevPlugin = ():Plugin =>{
    return {
        name:'electron-dev-plugin',
        //配置服务的钩子
        configureServer(server){
            server.httpServer?.on('listening',()=>{
				// 核心1 ： 获取vue3的服务地址
                let addressInfo =  server.httpServer?.address() as AddressInfo
                const devUrl = `http://localhost:${addressInfo.port}`
                console.log('plugins-dev : 服务的完整地址 ： ',devUrl) 
                
                // 核心2 ：加载测试环境的环境变量
                let envParams = loadEnv('development',path.resolve(process.cwd(),'./environmentconfig'));
                console.log('plugins-dev : 获取的环境变量 ： ',envParams.VITE_ENV)


                // 核心3 ： 进程传参，发送到electron的进程中
                let electronProcess = spawn(electron+'',['electron/electronMain.js',devUrl],{ stdio: 'inherit' }) as ChildProcess
                console.log('plugins-dev : electronProcess : ',electronProcess.pid)
                 
				// 扩展功能 ： 增加 electron 的热启动功能
                fs.watch('electron',()=>{
                    console.log('plugins-dev : electron 目录中的文件发生改变了')
                    electronProcess.kill()
                    electronProcess = spawn(electron+'',['electron/electronMain.js',devUrl],{ stdio: 'inherit' }) as ChildProcess

                })
            })
        }
    }
}

2、加载插件

在 viteconfig/vite.base.config.ts 文件中，添加 我们的自定义插件。

下面只展示了 vite.base.config.ts增量修改的部分。

ts 复制代码 
// 导入 electron开发时的插件，实现一键启动两个服务的功能
import { ElectronDevPlugin } from '../plugins/vite.dev.plugin'

import { defineConfig } from "vite"
console.log('load base-config...')
export default defineConfig({

    plugins: [
         ......
		// 添加自定义的插件
        ElectronDevPlugin(),
        
    ],

   .... 其他的配置
   
})

3、在 tsconfig.node.json 中添加插件目录

这一步主要是解决 关于插件的异常提示的问题。

在 tsconfig.node.json 文件的 include 中添加 plugins 目录即可。

json 复制代码 
{
  "extends": "@tsconfig/node20/tsconfig.json",
  "include": [
     ......
    "plugins/*"
  ],

}

4、electronMain.js 文件修改

此步骤的目的，是为了实现 在不同的环境下，加载不同的内容：
开发环境下 ： 直接加载 vue3 的项目服务地址；
打包时 ： 直接加载 vue3 打包之后的index.html文件。

ts 复制代码 
下面截取的是 要修改的内容：
......


// 引入path 模块
const path = require('path')


// 创建主窗口
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })
  // 加载当前vue 的地址
  // win.loadURL('http://localhost:5179')

  // 根据是否存在开发路径，决定加载开发环境的路径 or 生产环境的包
  let devUrl = process.argv[2]
  if(devUrl){
    win.loadURL(devUrl)
  }else{
    win.loadFile(path.resolve(__dirname,'pages/index.html'))
  }
}

......

5、vue3 路由文件的修改

本步骤，主要是为了实现

1、开发环境时，使用 history 模式；

2、打包生产时，使用 hash 模式。

ts 复制代码 
要修改的内容如下 ：
import { createRouter, createWebHistory,createWebHashHistory } from 'vue-router'

const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),
  // 根据环境变量的配置，开发时使用 history模式，打包时使用 hash 模式
  history: (import.meta.env.VITE_ENV == 'DEVELOPMENT') ? createWebHistory(import.meta.env.BASE_URL) : createWebHashHistory(),
  routes: [
     ......
     正常的路由配置
  ]
})

// 导出路由对象
export default router

6、package.json 中添加 启动脚本

在 package.json 文件中，添加 【一键启动】的脚本命令。

json 复制代码 
  ......
  "scripts": {
     .....
    // 一键启动两个服务的脚本
    "dev:all":"vite",
	......
  },
......

7、至此的目录结构

至此，我们的项目目录结构如下：

projectName
	| -- electron               # 【electron的主目录】
		| -- electronMain.js 
	| -- environmentconfig      # 【环境变量的配置目录】
		| -- .env
		| -- .env.development
		| -- .env.production
	| -- node_modules            # 依赖包的位置
	| -- plugins                 #【自定义插件的目录】
		| -- vite.dev.plugin.ts
	| -- public                  # 一些静态资源
	| -- src                     # 源文件目录
	| -- viteconfig              #【vite 配置目录】
		| -- vite.base.config.ts
		| -- vite.dev.config.ts
		| -- vite.prod.config.ts
	| -- .gitignore              # git忽略配置文件 
	| -- env.d.ts            
	| -- index.html              # vue主页面
	| -- package.json            # 项目配置文件
	| -- tsconfig.app.json       # 定义项目中其他文件的ts编译规则
	| -- tsconfig.json           # typescript 配置文件
	| -- tsconfig.node.json      # 配置vite.config.ts文件的编译规则
	| -- vite.config.mts          # 【vite 的根目录配置文件】

8、一键启动

下面我们进行启动测试：

命令行中执行 npm run dev:all

》 至此，一键启动的功能整合就完成了！

步骤七 ： 一键打包 配置 （难点）

实现思路 ：

1、先打包 vue3，将内容输出到 electron/pages 目录下；

2、自定义一个vite插件，在vue3打包完成之后，执行 electron 的打包操作；

1、electron-forge 依赖安装

shell 复制代码 
npm install --save-dev @electron-forge/cli

2、import 导入 forge 的脚手架

以下命令执行完成后，会在 根目录下 生成 forge.config.js 配置文件。

以及 在 package.json 文件的 script 脚本配置中自动添加如下内容 ：

其中，"make" 命令就是执行 electron 打包的脚本。

   "start": "electron-forge start",
   "package": "electron-forge package",
   "make": "electron-forge make"
shell 复制代码 
npx electron-forge import

为了确保相关的依赖都安装了，可以再手动执行以下下面的命令。

shell 复制代码 
npm install --save-dev @electron-forge/maker-squirrel 
npm install --save-dev @electron-forge/maker-deb 
npm install --save-dev @electron-forge/maker-rpm
npm install --save-dev @electron-forge/maker-zip
npm install --save-dev @electron-forge/maker-dmg

3、修改 forge.config.js 文件内容

主要是确保 配置中包含 windows 和 mac 的打包配置。

包含以下内容即可。不用太多。

主要看 makers 中的内容。

js 复制代码 
const { FusesPlugin } = require('@electron-forge/plugin-fuses');
const { FuseV1Options, FuseVersion } = require('@electron/fuses');

module.exports = {
  packagerConfig: {
    asar: true,
  },
  rebuildConfig: {},
  makers: [
    // windows 上的打包
    {
      name: '@electron-forge/maker-squirrel',
      config: {},
    },
  
    // mac 上的打包
    {
      name: '@electron-forge/maker-dmg',
      config: {
        //background: './assets/dmg-background.png',
        format: 'ULFO'
      }
    },
    // 打成 zip 的包，windows 上和 mac 上都有
    {
      name: '@electron-forge/maker-zip',
      platforms: ['darwin','win32'],
    },

  ],
  plugins: [
    {
      name: '@electron-forge/plugin-auto-unpack-natives',
      config: {},
    },
    // Fuses are used to enable/disable various Electron functionality
    // at package time, before code signing the application
    new FusesPlugin({
      version: FuseVersion.V1,
      [FuseV1Options.RunAsNode]: false,
      [FuseV1Options.EnableCookieEncryption]: true,
      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
      [FuseV1Options.EnableNodeCliInspectArguments]: false,
      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
      [FuseV1Options.OnlyLoadAppFromAsar]: true,
    }),
  ],
};

4、修改package.json 文件的配置（关键）

主要是：

1.需要完善项目的 author、 description 属性的配置（打包时必须要用的属性）;

2.明确主要的打包脚本,main 属性指定了 electron 的主进程文件。

下面是 【package.json】 文件的内容节选。

json 复制代码 
{
  "name": "electronvuebuildtest", // 项目的名称，也是打包之后的程序名称
  "version": "1.0.0", // 版本信息
  "private": true,
  "author": "northcastle", // 作者信息，必填
  "description": "The Project of Electron + Vue3 + Electron Forge", // 描述信息，必填
  "main": "electron/electronMain.js",
  "scripts": {
  
  	// 其实就是 一个默认的 vue3 的打包命令
    "build:all":"run-p type-check \"build-only {@}\" --",
    // electron-forge 相关的命令（必须要有）
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"  // electron 打包实际执行的命令就是这个
    ......
  },
  "dependencies": {
     ...
  },
  "devDependencies": {
    ...
  }
}

5、自定义打包插件

自定义插件，实现 vue3 打包完成之后，继续执行 electron的打包命令。

插件位置 ： plugins/vite.build.plugin.ts

ts 复制代码 
// 打包时用到的插件
// 项目打包时候的自定义插件

import { Plugin } from "vite";

// 通过 spawn 的方式执行 electron-forge 的打包命令
import { ChildProcess, spawn } from "node:child_process";

import os from 'os'

import fs from 'fs'

// 思路 ： 先等vite 打完包，然后再执行 electron的打包动作
// 因为，electron 打包是需要用到 vue 打包之后的 index.html 文件的
export const ElectronBuildPlugin = ():Plugin =>{
    return{
        name:'electron-build-plugin',
        closeBundle() {
            console.log('vite-vue 打包完成')

            // 先把之前的打包的文件删除
            let dirFlag = fs.existsSync('out')
            if(dirFlag){
                console.log('plugins-build : out目录 存在，先删除')
                fs.rmSync('out',{recursive:true})
            }else{
                console.log('plugins-build : out目录 不存在')
            }

           // 下面执行命令进行electron的打包
            const platform = os.platform();
        
            if (platform === 'win32') {
                console.log('当前运行环境是 Windows');
                // windows 上需要执行这种方式
                let buildChildProcess =  spawn('npm.cmd',['run','make'],{stdio: 'inherit'}) as ChildProcess

            } else if (platform === 'darwin') {
                console.log('当前运行环境是 Mac');
                // Mac上可以执行这种方式
                // let buildChildProcess = spawn('electron-forge',['make'],{stdio: 'inherit'}) as ChildProcess
                let buildChildProcess = spawn('npm',['run','make'],{stdio: 'inherit'}) as ChildProcess
            } else {
                console.log('其他平台 : ',platform,'【暂不支持打包】');
            }

        },
    }
}

6、把插件放到 vite.base.config.ts 中

ts 复制代码 
// vite 的通用配置

......

// 导入 打包时的插件，实现一键打包两个服务的功能
import { ElectronBuildPlugin } from '../plugins/vite.build.plugin'


import { defineConfig } from "vite"
console.log('load base-config...')
export default defineConfig({

    plugins: [
       ......
        ElectronBuildPlugin()
    ],

    ......
})

7.vite.prod.config.ts 文件属性确认

在打包为生产环境时，会加载 vite.prod.config.ts 文件

需要对以下两个属性进行确认，否则会影响打包效果。

a.base属性为./ 相对路径

必须修改，否则打包后无法加载页面

b.修改vue的打包输出目录

主要是为了把 vue 打包的内容直接输出到 electron/pages 的目录下，

这样就不用手动复制过去了。

》以下是上述两个的配置案例 ：

ts 复制代码 
// vite 的生产环境的配置

import { defineConfig } from "vite"
console.log('load prod-config...')

export default defineConfig({

    // 配置打包相关的属性
    base:'./',
    build:{
        outDir:'electron/pages'
    }
})

8、确认 electronMain.js 中是按环境加载的

此时需要加载我们打包完成之后的vue的页面内容。

js 复制代码 
/**
 * electron 的主进程
 */
// 导入模块
const { app, BrowserWindow  } = require('electron')

// 创建主窗口
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  })

  // 根据是否存在开发路径，决定加载不同的内容

  let devUrl = process.argv[2]
  if(devUrl){
    win.loadURL(devUrl)
  }else{
    // 打包时，主要用到的就是这一块，目录也需要搞正确
    // 'pages/index.html' 就是 vue 打包之后的存放的目录
    win.loadFile(path.resolve(__dirname,'pages/index.html'))
  }

}

...
其他的内容不变

9、文件目录确认

至此，所有的准备工作都搞定了，目录结构如下：

projectName
	| -- electron               # 【electron的主目录】
		| -- electronMain.js 
	| -- environmentconfig      # 【环境变量的配置目录】
		| -- .env
		| -- .env.development
		| -- .env.production
	| -- node_modules            # 依赖包的位置
	| -- plugins                 #【自定义插件的目录】
		| -- vite.dev.plugin.ts
		| -- vite.prod.plugin.ts
	| -- public                  # 一些静态资源
	| -- src                     # 源文件目录
	| -- viteconfig              #【vite 配置目录】
		| -- vite.base.config.ts
		| -- vite.dev.config.ts
		| -- vite.prod.config.ts
	| -- .gitignore              # git忽略配置文件 
	| -- env.d.ts            
	| -- forge.config.js         #  electron-forge 打包的配置文件
	| -- index.html              # vue主页面
	| -- package.json            # 项目配置文件
	| -- tsconfig.app.json       # 定义项目中其他文件的ts编译规则
	| -- tsconfig.json           # typescript 配置文件
	| -- tsconfig.node.json      # 配置vite.config.ts文件的编译规则
	| -- vite.config.mts          # 【vite 的根目录配置文件】

至此，所有打包的配置步骤就完了。下面就可以执行打包了

步骤八 ： 一键打包

打包 ： 虽然 forge.config.js 中我们配置了不同操作系统上的打包操作，

但实际上，在某个操作系统上执行的打包命令，则只能产出该操作系统上的文件。

例如 ：

在 Windows执行打包，只能打包出 Windows 上的安装程序；

在 Mac 上执行打包，只能打包出 Mac 上的安装程序。

1、执行打包

shell 复制代码 
npm run build:all
根据我们的配置，打包完成后，
1、vue的内容将会保存到 electron/pages 目录下；
2、electron 打包的内容将会被存放到 out 目录下。

打包过程记录如下 ：

cmd 复制代码 
 npm run build:all 

> electronvue3devbuild01@0.0.0 build:all
> run-p type-check "build-only {@}" --


> electronvue3devbuild01@0.0.0 type-check
> vue-tsc --build --force


> electronvue3devbuild01@0.0.0 build-only
> vite build

load base-config...
load prod-config...
load dev-config...
vite start : command :  build
vite start : mode :  production
process.cwd() :  /xxx/electronvue3/electronvue3devbuild01
__dirname:  /xxx/electronvue3/electronvue3devbuild01
envdir ：  /xxx/electronvue3/electronvue3devbuild01/environmentconfig
加载生产环境 : 
vite v5.2.10 building for production...
✓ 48 modules transformed.
electron/pages/index.html                      0.43 kB │ gzip:  0.28 kB
electron/pages/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
electron/pages/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
electron/pages/assets/AboutView-Y2lkSRWg.js    0.22 kB │ gzip:  0.20 kB
electron/pages/assets/index-CweW04qw.js       89.45 kB │ gzip: 35.39 kB
✓ built in 415ms
vite-vue 打包完成
plugins-build : out目录 不存在


> electronvue3devbuild01@0.0.0 make
> electron-forge make

✔ Checking your system
✔ Loading configuration
✔ Resolving make targets
  › Making for the following targets: ,
✔ Running package command
  ✔ Preparing to package application
  ✔ Running packaging hooks
    ✔ Running generateAssets hook
    ✔ Running prePackage hook
  ✔ Packaging application
    ✔ Packaging for arm64 on darwin [2s]
  ✔ Running postPackage hook
✔ Running preMake hook
✔ Making distributables
  ✔ Making a dmg distributable for darwin/arm64 [4s]
  ✔ Making a zip distributable for darwin/arm64 [8s]
✔ Running postMake hook

	// 重点提示 ： 打包成功，文件放在 out 目录下 的 make 目录下
  › Artifacts available at: /xxx/electronvue3/electronvue3devbuild01/out/make

(node:40995) [DEP0147] DeprecationWarning: In future versions of Node.js, fs.rmdir(path, { recursive: true }) will be removed. Use fs.rm(path, { recursive: true }) instead
(Use `node --trace-deprecation ...` to show where the warning was created)

2、打包完成之后的目录

projectName
	| -- electron               # 【electron的主目录】 
		| -- pages              #【vue 打包的输出目录】
			| -- index.html
			| -- assets
			| -- xxxxx
		| -- electronMain.js 
	| -- environmentconfig      # 【环境变量的配置目录】
		| -- .env
		| -- .env.development
		| -- .env.production
	| -- node_modules            # 依赖包的位置
   ｜ -- out                     #【electron 打包输出目录】
   		｜ -- make
	| -- plugins                 #【自定义插件的目录】
		| -- vite.dev.plugin.ts
		| -- vite.prod.plugin.ts
	| -- public                  # 一些静态资源
	| -- src                     # 源文件目录
	| -- viteconfig              #【vite 配置目录】
		| -- vite.base.config.ts
		| -- vite.dev.config.ts
		| -- vite.prod.config.ts
	| -- .gitignore              # git忽略配置文件 
	| -- env.d.ts            
	| -- forge.config.js         #  electron-forge 打包的配置文件
	| -- index.html              # vue主页面
	| -- package.json            # 项目配置文件
	| -- tsconfig.app.json       # 定义项目中其他文件的ts编译规则
	| -- tsconfig.json           # typescript 配置文件
	| -- tsconfig.node.json      # 配置vite.config.ts文件的编译规则
	| -- vite.config.mts          # 【vite 的根目录配置文件】

ok ，至此，electron + vue3 + vite + electron forge 的全流程 一键启动 & 一键打包功能就完成了。

如果您完全按照我的步骤进行操作，则相信您已经成功构建出自己的项目啦。

相关推荐
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
Gavin_9153 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
Devil枫9 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子10 小时前
【Vue 全家桶】6、vue-router 路由（更新中）
前端·vue.js
毕业设计制作和分享11 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果11 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄11 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰12 小时前
设计模式 策略模式 场景Vue （技术提升）
vue.js·设计模式·策略模式
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play