vite + vue3 搭建 electron 项目
1 使用 vite 创建 vue3 项目2 安装 electron 依赖3 嵌入 electron3.1 创建 electron 目录3.2 配置 electron 插件3.3 书写 electron 主进程3.4 配置 electron 启动入口3.5 启动项目，小问题修复3.5.1 控制台报错解决方案3.5.2 修改项目图标3.5.3 解决配置process.env.PUBLIC ts报错问题3.5.4 修改 isolatedModules 属性 4 打包 electron4.1 安装依赖 electron-builder4.2 修改 package.json 文件配置4.3 执行打包1 使用 vite 创建 vue3 项目
在桌面打开powershell，输入命令 npm create vite@latest （输入项目名称，选择vue、typescript），然后用vscode打开项目，目录如下2 安装 electron 依赖
在项目中安装electron 插件// electron 插件npm install electron -D// vite 构建electron 应用npm install vite-plugin-electron -D // 在vite构建的项目中可以使用electron 插件，后面项目通信时需要使用npm install vite-plugin-electron-renderer -D
3 嵌入 electron
3.1 创建 electron 目录
在根目录下创建electron目录，在electron目录下创建main目录（主进程），preload目录（渲染进程）。
3.2 配置 electron 插件
在 vite.config.ts 中，配置 Electron 入口文件, 参考配置
// vite.config.tsimport {defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import electron from 'vite-plugin-electron'import renderer from 'vite-plugin-electron-renderer'// https://vitejs.dev/config/export default defineConfig({plugins: [vue(),electron([// 主进程配置{// 打包入口entry: 'electron/main/index.ts',onstart(options) {// 启动electron 项目options.startup()},vite: {build: {// 构建出口outDir: 'dist-electron/main',},},},// 渲染进程配置{entry: 'electron/preload/index.ts',onstart(options) {// 加载渲染进程配置options.reload()},vite: {build: {outDir: 'dist-electron/preload',},},}]),renderer({// 渲染进程融入nodenodeIntegration: true,})],})
3.3 书写 electron 主进程
// electron/main/index.tsimport {app, BrowserWindow } from "electron";import {join } from "path";// 配置构建时输出文件目录路径process.env.DIST_ELECTRON = join(__dirname, "..");// 配置打包后输出文件目录路径process.env.DIST = join(process.env.DIST_ELECTRON, "../dist");// 配置public 文件目录路径，VITE_DEV_SERVER_URL表示vite默认生成的服务urlprocess.env.PUBLIC = process.env.VITE_DEV_SERVER_URL? join(process.env.DIST_ELECTRON, "../public"): process.env.DIST;// 配置打包后的文件加载路径const indexHtml = join(process.env.DIST, "index.html");// 这个需要electron加载编译后的js文件const preload = join(__dirname, "../preload/index.js");// vite启动项目时的服务路径const url = process.env.VITE_DEV_SERVER_URL;let mainWind: BrowserWindow | null = null;function createWind() {mainWind = new BrowserWindow({webPreferences: {preload,// 渲染进程可以调用 node 中的方法nodeIntegration: true,contextIsolation: false,},});if (url) {// 加载本地开发路径mainWind.loadURL(url);// 开发调试mainWind.webContents.openDevTools();mainWind.maximize();} else {// 打包后加载路径mainWind.loadFile(indexHtml);}}app.whenReady().then(() => {createWind();app.on('activate', () => {// 此处解决mac系统关闭app后，但程序坞中还存在图标，再次点击可以重新创建进程if(BrowserWindow.getAllWindows.length === 0) createWind();})})app.on('window-all-closed', () => {// electron 运行在三个环境（win32 Windows系统、linux Linux系统、 darwin Mac系统）// 此处解决的是非mac系统，程序退出进程 (Mac系统关闭app会保留在程序坞中)if(process.platform !== 'darwin') app.quit();})
3.4 配置 electron 启动入口
在package.json 文件中删除 “type”: “module”（配置成module将无法使用es module模式）, 配置main文件入口
{"name": "markdown-electron","description": "markdown electron project","main": "dist-electron/main/index.js","private": true,"version": "0.0.0","author": "dan","license": "MIT","keywords": ["electron","rollup","vite","vue3","vue"],"scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.2.47"},"devDependencies": {"@vitejs/plugin-vue": "^4.1.0","electron": "^23.2.0","typescript": "^4.9.3","vite": "^4.2.0","vite-plugin-electron": "^0.11.1","vite-plugin-electron-renderer": "^0.13.6","vue-tsc": "^1.2.0"}}
3.5 启动项目，小问题修复
运行命令 npm run dev
3.5.1 控制台报错解决方案
在根目录index.html 添加以下代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 解决控制台警告问题 --><meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';"><title>MARKDOWN</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>
3.5.2 修改项目图标
在public目录下添加一个favicon.ico 图标（自行去网上找自己喜欢的图标），然后修改electron入口文件
function createWind() {mainWind = new BrowserWindow({// 添加icon，process.env.PUBLIC前面说的路径识别icon: join(process.env.PUBLIC, "favicon.ico"),webPreferences: {nodeIntegration: true,contextIsolation: false,preload,},});}
3.5.3 解决配置process.env.PUBLIC ts报错问题
默认process.env是不存在PUBLIC属性的，因此需要配置electron-env.d.ts文件。在electron目录下新建electron-env.d.ts文件
/// <reference types="vite-plugin-electron/electron-env" />declare namespace NodeJS {interface ProcessEnv {DIST_ELECTRON: stringDIST: stringPUBLIC: string}}
添加上述文件后，需要修改 tsconfig.json 文件
// tsconfig.json"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","electron/**/*.ts", //增加electron下的.ts识别"electron/**/*.d.ts", //增加electron下的.d.ts识别],
3.5.4 修改 isolatedModules 属性
默认情况 isolatedModules 是开启的，因此在ts 文件中会报错
需要修改 tsconfig.json 下的 isolatedModules 属性
// tsconfig.json"isolatedModules": false, // 默认为true
4 打包 electron
4.1 安装依赖 electron-builder
npm install electron-builder -D
4.2 修改 package.json 文件配置
// package.json{"name": "markdown-electron","description": "markdown electron project","main": "dist-electron/main/index.js","private": true,"version": "0.0.1","author": "dan","license": "MIT","keywords": ["electron","rollup","vite","vue3","vue"],"scripts": {"dev": "vite","build": "vue-tsc --noEmit && vite build && electron-builder","preview": "vite preview"},// 打包配置"build": {"appId": "Markdown","asar": true,"icon": "public/favicon.ico","directories": {"output": "release/${version}"},"files": ["dist-electron","dist"],"mac": {"artifactName": "${productName}_${version}.${ext}","target": ["dmg"]},"win": {"target": [{"target": "nsis","arch": ["x64"]}],"artifactName": "${productName}_${version}.${ext}"},"nsis": {"oneClick": false,"perMachine": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": false}},"dependencies": {"vue": "^3.2.47"},"devDependencies": {"@vitejs/plugin-vue": "^4.1.0","electron": "^23.2.0","electron-builder": "^23.6.0","typescript": "^4.9.3","vite": "^4.2.0","vite-plugin-electron": "^0.11.1","vite-plugin-electron-renderer": "^0.13.6","vue-tsc": "^1.2.0"}}
electron-builder 配置参考
4.3 执行打包
npm run build
至此，项目构建和打包就完美撒花了。源码地址
