创建Electron项目

一、使用vite 构建 electron项目

npm init vite@latest
Need to install the following packages:create-vite@latest
Ok to proceed? (y) y
√ Project name: ... CertificateDownload
√ Package name: ... certificatedownload
√ Select a framework: » Vue
√ Select a variant: » TypeScriptScaffolding project in E:\electron\CertificateDownload...Done. Now run:cd CertificateDownloadnpm installnpm run dev

按说明输入如下命令

cd CertificateDownload
npm install
npm run dev

  VITE v4.4.6  ready in 565 ms➜  Local:   http://127.0.0.1:5173/➜  Network: use --host to expose➜  press h to show help

安装electron

npm install electron -D
npm install vite-plugin-electron -D

如果提示

error command failederror command C:\Windows\system32\cmd.exe /d /s /c node install.js

可能是没有python环境，需要自行安装，或者通过下面方式进行安装

使用cnpm i electron --save-d进行安装，提示

√ All packages installed (72 packages installed from npm registry, used 2m(network 4s), speed 591.99kB/s, json 70(1.16MB), tarball 1.4MB)

如果

如图所示 当执行npm i electron -D会一直卡在这个地方

解决办法 使用cnpm

cnpm install electron -D
cnpm install vite-plugin-electron -D
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功

根目录新建 electron / index.ts

修改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({main: {entry: "electron/index.ts"}})]
})

编写代码 electron / index.ts

import { app, BrowserWindow } from 'electron'
import path from 'path'
//app 控制应用程序的事件生命周期。
//BrowserWindow 创建并控制浏览器窗口。let win: BrowserWindow | null;
//定义全局变量获取 窗口实例const createWindow = () => {win = new BrowserWindow({//webPreferences: {devTools: true,contextIsolation: false,nodeIntegration: true//允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思）}})if (app.isPackaged) {win.loadFile(path.join(__dirname, "../index.html"));} else {
//VITE_DEV_SERVER_HOST 如果是undefined 换成  VITE_DEV_SERVER_HOSTNAMEwin.loadURL(`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`)}
}
//isPackage 不好使换下面的//  if(process.env.NODE_ENV != 'development'){//  win.loadFile(path.join(__dirname, "../index.html"));//  }else{//win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOSTNAME']}:${process.env['VITE_DEV_SE//RVER_PORT']}`)// }
//在Electron完成初始化时被触发
app.whenReady().then(createWindow)

配置package json 增加main 字段 type 去掉

{"name": "certificatedownload","private": true,"version": "0.0.0","main": "electron/index.ts","scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview","start": "electron ."},"dependencies": {"vue": "^3.3.4"},"devDependencies": {"@vitejs/plugin-vue": "^4.2.3","electron": "^25.3.1","typescript": "^5.0.2","vite": "^4.4.5","vite-plugin-electron": "^0.12.0","vue-tsc": "^1.8.5"}
}

将start修改为"start": "electron"

运行npm run start

环境没有问题

将start修改为"start": "electron ."

 

扩展
如果直接快速新建一个electron项目
 

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start