准备环境

• Vite 需要 Node.js 版本 14.18+，16+
• 个人当前环境：node@16.15.0、pnpm@8.3.1

一、使用vite构建工具创建一个vue+ts基本模板

执行pnpm create vite web-electron-template --template vue-ts命令构建一个基于vue+ts的预设模板。

pnpm create vite web-electron-template --template vue-ts

二、安装electron跟vite-plugin-electron插件

pnpm add -D electron vite-plugin-electron

注意：在下载过程中如果遇到卡住无法下载的问题时在跟目录创建一个.npmrc文件，将electron_mirror=https://npmmirror.com/mirrors/electron/CV进去再重新执行安装命令。

这次就安装成功了。

再次注意:如果需要兼容windows7/8/8.1版本，需要指定23.0.0版本以下的electron。

pnpm add -D electron@^22

三、在vite.config.ts中使用vite-plugin-electron插件

1. 在根目录创建electron文件夹存放electron应用程序的代码方便管理，创建main.ts主进程文件并添加初始化程序。
2. 配置vite-plugin-electron插件需要进行打包编译的文件入口。

四、将网页装载到electron应用程序

1. 配置package.json的入口地址

由于electron主进程是使用的node环境，而默认情况下，Node.js 使用的是 CommonJS 模块规范，而 import 语句属于 ECMAScript 模块规范，两者不兼容。所以需要使用编译为 CommonJS 规范的dist-electron/main.js作为main属性的入口文件，否则会报es6语法错误。

正确写法。

也可设置vite-plugin-electron的配置指定打包后的路径。

五、package.json配置"type":"module"报错问题

由于dist-electron文件夹下是打包编译后的CommonJS模块规范的代码，当package.json设置type为module(ECMAScript模块规范)时将会将无法识别 CommonJS 模块规范的语法从而产生报错。此时就可以删除type:module或者将 type 的值设置为"commonjs"即可。因为不设置 type 时 Node.js 会默认使用 CommonJS 模块系统。

六、控制台中文乱码问题

chcp 65001 是 Windows 系统下的一个命令，用于将控制台的代码页设置为 UTF-8 编码。在默认情况下，Windows 控制台使用的是 GBK 或者其他本地编码，导致在控制台中输出中文等非 ASCII 字符时可能会出现乱码。 使用 chcp 65001 命令可以将控制台的代码页设置为 UTF-8 编码，以便正确显示中文等非 ASCII 字符。

完整代码

/** package.json */
{
	"name": "web-electron-template",
	"private": true,
	"version": "0.0.0",
	"main": "dist-electron/main.js",
	"scripts": {
		"dev": "chcp 65001 && vite",
		"build": "vue-tsc && vite build",
		"preview": "vite preview"
	},
	"dependencies": {
		"vue": "^3.2.47"
	},
	"devDependencies": {
		"@vitejs/plugin-vue": "^4.1.0",
		"electron": "^22.3.12",
		"typescript": "^5.0.2",
		"vite": "^4.3.9",
		"vite-plugin-electron": "^0.11.2",
		"vue-tsc": "^1.4.2"
	}
}

---

/** electron/main.ts */

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

const createWindow = () => {
	const win = new BrowserWindow({
		width: 960,
		height: 600,
		webPreferences: {
			nodeIntegration: true, // 设置是否在页面中启用 Node.js 集成模式
			contextIsolation: false, // 设置是否启用上下文隔离模式。
		},
	});

	if (process.env.VITE_DEV_SERVER_URL) {
		win.loadURL(process.env.VITE_DEV_SERVER_URL);
	} else {
		win.loadFile(join(__dirname, 'index.html'));
	}
  console.log("中文！！");
};

app.whenReady().then(createWindow);

---

/** vite.config.ts */

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

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		electron({
                   entry: 'electron/main.ts', // 设置需要编译的入口文件
		}),
	],
});

总结

1. 创建项目、执行pnpm i安装模板依赖
2. 安装electron、vite-plugin-electron
3. 配置vite.config.ts文件使用vite-plugin-electron插件并配置electron打包入口文件
4. 在根目录创建electron文件夹，创建main.ts为electron的主进程文件入口并准备好初始化代码
5. 设置package.json的main属性声明应用程序运行的入口文件并删除type:module属性
6. 执行pnpm dev即可打开electon桌面应用

任务列表

• 搭建electron项目
  • 运行electron桌面端开发环境
  • 运行web浏览器端开发环境
• 打包
• electron通信