1、安装nodejs及环境配置；
nodejs装完后，设置python路径；
npm config set python "D:\ProgramFiles\Miniconda3\python.exe"
若报错:
npm ERR!
pythonis not a valid npm option
原因为npm版本问题，v9存在此问题，可将其将为v8：
npm install -g npm@^8
安装node-gyp：node-gyp 是一个可以编译 node 插件的工具，在使用 node-gyp 前需要安装 python 环境和 C++ 环境。
npm install -g node-gyp
c++环境，2种方式任选1：
1)安装 windows-build-tools
2)visual studio community 安装c++桌面开发工具；
安装完成后，设置msvs版本：
npm config set msvs_version 2022
最后，配置node-gyp：
node-gyp configure
node-gyp build
若configure出现报错，找不到python路径，可手动指定：
node-gyp --python="D:\ProgramFiles\Miniconda3\python.exe" configure
若找不到 binding.gyp，
gyp: binding.gyp not found (cwd: D:\PWA) while trying to load binding.gyp
需手动创建，放在C:\Users\用户名 目录下。内容为：
{
"targets": [{
"target_name": "binding",
"sources": [ "<PATH TO NODE>" ]
}]
}
为了加快速度，设置国内源：
npm config set registry http://registry.npm.taobao.org --global
######## 添加electron
//设置国内源，否则会卡住
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
// Electron安装
npm install electron -g
// Vue项目添加Electron-builder打包工具
vue add electron-builder
2、vue/vite/typescript；
创建项目
npm create vite@latest servermonitor --template vue-ts
//提示安装vite，然后依次选择 Vue、TypeScript
cd servermonitor //进入到项目路径
npm install
npm run dev
安装Electron
npm install electron -D //安装electron
安装electron-builder：用来打包成可安装exe文件 和 绿色版免安装exe程序
npm install electron-builder -D
安装electron-devtools-installer：<meta name="source" content="lake">主要是为了方便我们开发和调试electron，可以去官网详细了解：electron-devtools-installer
npm install electron-devtools-installer -D
安装vite-plugin-electron：<meta name="source" content="lake">集成了Vite和Electron，比如使用它之后可以让我们方便的在渲染进程中使用Node API或者Electron API，详细使用用法可以去官网学习：vite-plugin-electron。
npm install vite-plugin-electron -D
npm install vite-plugin-electron-renderer -D
安装rimraf ：辅助作用，让我们快速删除某些文件和文件夹。
npm install rimraf -D
3、初始化Electron
Electron项目分为了主进程和渲染进程，主进程其实就是我们的Electron，渲染进程就相当于我们的Vue项目。
新建主进程
为了方便修改代码和查看，我们在项目根目录新建主进程文件夹electron-main，然后在其目录下新建index.ts文件，编写主进程代码。
// electron-main/index.ts
import { app, BrowserWindow } from "electron";
import path from "path";
const createWindow = () => {
const win = new BrowserWindow({
webPreferences: {
contextIsolation: false, // 是否开启隔离上下文
nodeIntegration: true, // 渲染进程使用Node API
preload: path.join(__dirname, "./electron-preload/index.js"), // 需要引用js文件
},
});
// 如果打包了，渲染index.html
if (app.isPackaged) {
win.loadFile(path.join(__dirname, "../index.html"));
} else {
let url = "http://localhost:5173"; // 本地启动的vue项目路径。注意：vite版本3以上使用的端口5173；版本2用的是3000
win.loadURL(url);
}
};
app.whenReady().then(() => {
createWindow(); // 创建窗口
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
// 关闭窗口
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
上段代码只是一个最简单的Electron主进程的代码，大家也可以直接去官网看一下即可。这里有两个点需要大家注意：
- 渲染进程路径引用的是js而不是ts，因为electron是不认识ts文件的，有些小伙伴可能不理解引用的js文件合适产生的，这都不用着急，我们安装的插件会帮我们解决的。
- app.isPackaged主要是用来判断应用是否已经打包了，打包了我们只需要引用相对路径的html文件即可。
新建预加载文件
electron中有一个预加载的概念，也就是我们常说的preload，在该文件里面可以在其它脚本文件执行之前运行，它可以调用一些Node API。
在项目根目录新建electron-preload文件夹，然后在其目录下新建index.ts文件，编写代码：
// electron-preload/index.ts
import os from "os";
console.log("platform", os.platform());
4、修改tsconfig.json
前面已经建好了渲染进程和预加载文件，但放在项目根目录里面的。自动生成的Vue3+ts项目只初始化了src目录下的文件监听，所以我们需要修改一下tsconfig.json配置文件。
在include属性里新增关于electron文件监听的配置项：
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"electron-main/**/*.ts",
"electron-preload/**/*.ts"
]
5.修改vite.config.ts
虽然建好了electron的主进程文件和预加载文件，但是如果不做任何处理，这两个文件就和普通的脚本文件没有任何区别了。所以我们需要修改vite.config.ts配置文件，以此将electron和vite项目结合起来。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from "vite-plugin-electron";
import electronRenderer from "vite-plugin-electron-renderer";
import polyfillExports from "vite-plugin-electron-renderer";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
electron({
entry: "electron-main/index.ts", // 主进程文件
}),
electronRenderer(),
polyfillExports(),
],
build: {
emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录
outDir: "dist-electron"
},
});
6.修改package.json
package.json作为一个项目里面很重要的一个文件，我们自然是不能忽略的。在这里我们需要配置我们项目的入口文件以及打包的相关配置。
{
"name": "servermonitor",
"private": true,
"version": "0.0.0",
"main": "dist-electron/index.js",
"scripts": {
"dev": "vite",
"build": "rimraf dist-electron && vite build && electron-builder",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.47"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.1.0",
"@vueuse/electron": "^9.13.0",
"electron": "^23.2.1",
"electron-builder": "^23.6.0",
"electron-devtools-installer": "^3.2.0",
"pkg": "^5.8.1",
"rimraf": "^4.4.1",
"typescript": "^4.9.3",
"vite": "^4.2.0",
"vite-plugin-electron": "^0.11.1",
"vite-plugin-electron-renderer": "^0.13.14",
"vue-tsc": "^1.2.0"
}
}
配置了main入口文件，由于electron还未支持ts，所以需要引用打包后的index.js文件。
除此之外，修改了build命令，利用electron-builder进行electron项目的打包。
7.配置electron-builder打包脚本
想要顺利打包项目，还需要写一些关于electron-builder的打包脚本代码，如果想要详细了解脚本的各项配置项的作用的，可以去官网学习一些：electron-builder。
修改package.json：
"build": {
"appId": "com.servermonitor.desktop",
"productName": "servermonitor",
"asar": true,
"copyright": "Copyright © 2023 hw",
"directories": {
"output": "release/${version}"
},
"files": [
"./dist",
"./package.json",
"./dist-electron"
],
"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
},
"publish": [
{
"provider": "generic",
"url": "http://127.0.0.1:8080"
}
],
"releaseInfo": {
"releaseNotes": "发布版本"
}
}
npm run dev
运行效果：
执行打包：
npm run build
参考资料：
https://stackoverflow.com/questions/74522956/python-is-not-a-valid-npm-option
https://juejin.cn/post/7118412140582535175
https://github.com/nodejs/node-gyp/issues/2664
https://github.com/nodejs/node-gyp/issues/1709
https://juejin.cn/post/7137942639717908517
https://juejin.cn/post/7201195953691983927
https://zhuanlan.zhihu.com/p/521239144
