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

说明

本文介绍一下 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项目

# 创建项目
npm create vue@latest

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

# 安装依赖
npm install

# 启动访问
npm run dev

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 配置文件

步骤二 ：引入Electron

1、安装Electron

# 安装Electron
npm install --save-dev electron

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

# 进入到项目的根目录
cd <your project name>

# 创建electron目录
mkdir electron

3、在electron目录下创建主进程 electronMain.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 文件内容

{
   // 其他的基础配置
   .....
 
  "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

npm run dev:vue

2.启动electron

npm run dev:electron

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

1、操作步骤

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

2、具体的文件内容

.env

# 全局的环境变量
VITE_HELLO=HELLO WORLD

.env.development

# 开发环境的参数配置
VITE_ENV=DEVELOPMENT

.env.production

# 正式环境的参数配置
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 配置文件重构（重点）

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 的通用配置

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 的开发环境的配置

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

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

vite.prod.config.ts

// vite 的生产环境的配置

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

export default defineConfig({

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

vite.config.mts

// 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文件

{
  .....
  "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、创建自定义插件

// 开发环境的自定义插件

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、加载插件

// 导入 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 中添加插件目录

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

}

4、electronMain.js 文件修改

下面截取的是 要修改的内容：
......


// 引入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 路由文件的修改

要修改的内容如下 ：
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 中添加 启动脚本

  ......
  "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、一键启动

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

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

1、electron-forge 依赖安装

npm install --save-dev @electron-forge/cli

2、import 导入 forge 的脚手架

npx electron-forge import

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 文件内容

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 文件的配置（关键）

{
  "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、自定义打包插件

// 打包时用到的插件
// 项目打包时候的自定义插件

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 中

// 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 文件属性确认

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

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

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

// vite 的生产环境的配置

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

export default defineConfig({

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

8、确认 electronMain.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 的根目录配置文件】

步骤八 ： 一键打包

1、执行打包

npm run build:all

根据我们的配置，打包完成后，
1、vue的内容将会保存到 electron/pages 目录下；
2、electron 打包的内容将会被存放到 out 目录下。

 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 的根目录配置文件】