写在前面

第一次在掘金上编写文章首先是因为看了up主：“小满zs”的视频。在创建项目的时候发现新版插件有区别然后就是想在掘金上记录一下，给大家踩坑。下面是视频链接推荐大家去看看大佬的视频的。不喜勿喷

哔哩哔哩：www.bilibili.com/video/BV1dS…

开箱即用

首先用vite构建一个vue3的项目（不过多介绍了）
安装electron和vite-plugin-electron插件。
修改vite.config.ts配置文件支持electron
在项目根目录新建electron/main.ts入口文件
修改package.json里面的入口文件main
安装electron-builder打包插件并且修改package.json里面打包
在根目录下面新建打包文件配置electron-builder.json5

1.首先用vite构建一个vue3的项目

npm init vue

需要什么就配置什么就好了这一块就不过多介绍了

2.安装electron和vite-plugin-electron插件。

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

vite-plugin-electron的github的地址(github.com/electron-vi…) 大家可以去vite-plugin-electron/examples/quick-start看官方案例

3.修改vite.config.ts配置文件支持electron

大家安装好vite-plugin-electron插件之后需要去vite.config.ts里面配置一下

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import electron from "vite-plugin-electron"//让vite支持electron


export default defineConfig({
  plugins: [vue(), vueJsx(), electron({
    entry: "electron/main.ts",//配置入口文件
    onstart: options => {
      options.startup(['.', '--no-sandbox'])
    }
  })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
 
})

4. 在项目根目录新建electron/main.ts入口文件

在项目的根目录下面创建electron文件夹并且在里面创建main.ts文件

electron/main.ts

import path from 'path'
import { app, BrowserWindow } from 'electron'

let win: BrowserWindow

app.whenReady().then(() => {
  win = new BrowserWindow({
    width: 1500,//初始化窗口宽度
    height: 900,//初始化窗口高度
  })
  win.webContents.openDevTools()//在开发者模式下打开控制台
  if (process.env.VITE_DEV_SERVER_URL) {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  } else {
    win.loadFile(path.join(__dirname, '../dist/index.html'))
  }
})

5.修改package.json里面的入口文件main

{
  "name": "vite-electron",
  "version": "0.0.0",
  "private": true,
  "main": "dist-electron/main.js",//自己手动新增electron的打包入口文件（官网写法）
  "scripts": {
    "dev": "vite --open",
    "build": "run-p type-check build-only",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },
}

如果上面五步配置完成不出意外的话运行项目已经是没问题了

6. 安装electron-builder打包插件并且修改package.json里面打包

因为最新版本vite-plugin-electron这个插件和打包插件在一起使用需要配置新东西才行

安装打包插件

npm i electron-builder -D

修改package.json打包文件

 "scripts": {
    "dev": "vite --open",
    "build": "run-p type-check build-only && electron-builder",//添加&&electron-builder打包
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit"
  },

7. 在根目录下面新建打包文件配置electron-builder.json5

electron-builder.json5

{
  "appId": "YourAppID",//这是你的app的id
  "asar": true,//是否在打包完成后展示打包代码
  "directories": {
    "output": "release/${version}"//打包完成输出的文件
  },
  "files": [//本地文件地址
    "dist",
    "dist-electron"//如果没有这个一定要加上不然有可能打包不成功进行报错
  ],
  "mac": {
    "artifactName": "${productName}_${version}.${ext}",
    "target": [
      "dmg"
    ]
  },
  "win": {
    "target": [
      {
        "target": "nsis",
        "arch": [
          "x64"
        ]
      }
    ],
    "artifactName": "${productName}_${version}.${ext}"
  },
  "nsis": {
   "oneClick": false, // 创建一键安装程序还是辅助安装程序
    "allowElevation": true, 
    "allowToChangeInstallationDirectory": true, // 是否允许修改安装目录 
    "installerIcon": "buil/ico.ico",// 安装程序图标的路径
    "uninstallerIcon": "buil/ico.ico",// 卸载程序图标的路径
    "installerHeader": "buil/ico.ico", // 安装时头部图片路径（仅作用于辅助安装程序）
    "installerHeaderIcon": "buil/ico.ico", // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
    "uninstallDisplayName": "${productName}${version}", // 控制面板中的卸载程序显示名称
    "createDesktopShortcut": true, // 是否创建桌面快捷方式
    "createStartMenuShortcut": true,// 是否创建开始菜单快捷方式
    "shortcutName": "SHom", // 用于快捷方式的名称，默认为应用程序名称
    "deleteAppDataOnUninstall": false, // 是否在卸载时删除应用程序数据
    "runAfterFinish": true,  // 完成后是否运行已安装的应用程序
    "menuCategory": false, // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为true，则使用公司名称
  }
}

使用vite创建v3+electron的项目