开始

创建项目后安装electron插件和electron-builder

yarn add vite-pulgin-electron electron-builder --dev
or
npm i vite-plugin-electron electron-builder -D

根目录创建electron-main文件夹并创建index.ts文件，写入如下内容

import { app, BrowserWindow, Menu } from "electron";
const createWindow = () => {
//创建窗口
	const win = new BrowserWindow({
		width: 1000,
		height: 600,
		minHeight: 600,
		minWidth: 800,
		webPreferences: {
			devTools: true,
		},
	});
	const nodeEnv = process.env;
        // 主要是这个if块 根据不同环境 加载不同资源
	if (nodeEnv.VITE_USER_NODE_ENV === "development") {
                // 开发模式监听vite server默认端口 并打开开发者工具
		win.loadURL("http://localhost:3000");
		const ses = win.webContents.session;
		let url = `C:\\Users\\admin\\AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions\\nhdogjmejiglipccpnnnanhbledajbpd\\6.1.4_1`;
		ses
			.loadExtension(url)
			.then(() => {
				win.webContents.openDevTools();
			})
			.catch(err => {
				console.log(err);
			});
	} else {
                // 生产模式 加载打包后的index.html
		win.loadFile("dist/index.html");
	}
};

app.on("window-all-closed", () => {
	if (process.platform !== "darwin") app.quit();
});
app.whenReady().then(() => {
	Menu.setApplicationMenu(null);
	createWindow();

	app.on("activate", () => {
		if (BrowserWindow.getAllWindows().length === 0) createWindow();
	});
});

vite.config.ts配置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import electron from "vite-plugin-electron";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({ //electron插件相关配置
      main: {
        entry: "electron-main/index.ts", // electron 运行的入口文件
        vite:{
          build:{
            outDir:'./dist-electron' // electron打包输出的目录
          }
        }
      },
    }),
  ]
  build:{
    target:'esnext'
  },
  base:'./' // 根
});

base 默认为“/”，我这边的测试结果是：只有base为“./”后打包后的exe后才会正常运行

package.json主要配置

	"main": "dist-electron/index.js",
	"build": {
		"appId": "example.app.id", // id 
		"productName": "productName", //产品名称
		"directories": {
			"output": "build" // 输出目录
		},
		"files": [ // 要打包的文件或文件夹
			"./dist/**/*",
			"./package.json",
			"./dist-electron/*"
		],
                // 下面都不是重要的配置
		"win": {
			"target": [
				{
					"target": "nsis",
					"arch": [
						"ia32"
					]
				}
			],
			"icon": "./public/icon(1).png",
			"artifactName": "${productName}_${version}.${ext}"
			
		},
		"nsis": {
			"oneClick": false,
			"allowToChangeInstallationDirectory": true,
			"runAfterFinish": false
		}
	},

相关问题

报错‘x/x/x/x/nsis/nsis-*.*.*’ is not exits’

nsis资源不存在或未找到 解决办法： 在github中下载对应版本号的压缩包，解压后放在报错的文件夹中

报错‘x/x/x/x/nsis/nsis-resources-*.*.*’ is not exits’

解决办法同上