前言
前段时间帮一个不是程序员的朋友搭建了属于自己的博客，但是他不会 Github 和 VS Code，这就让更新博客成为一件麻烦事。
又因为朋友的特殊使用习惯，单纯使用网页更新的话，安全性得不到保障，而且不能初始化和自定义设置。因为我没服务器，无法搭建 http 服务和数据库。
思考了一段时间，突然想起我是个前端啊，那用 Electron 直接写个桌面应用不就行了。敏感数据直接保存到本地，也不用担心安全问题，还省了服务器的费用（这是重点）。
环境
node: 18.16.0
npm: 9.5.1
electron: 24.2.0
vite: 4.3.2
vue: 3.2.47
实现
初上手 Electron，目录结构犯了难，是把 Vue 项目直接放在 Electron 项目内好呢，还是分开好一些。
在网上搜了一下最佳实践，好像都有。
偶然间在知乎看见一个大佬解释 Electron 项目，“其实把 Electron 想象成在本地部署运行的 node 服务和 Vue 项目就行了，不要过多思考 Electron 的定位”。
这一下茅塞顿开，决定将 Vue 和 Electron 分别存放开发。
这样以后将页面单独剥离，作为 web 项目开发，也不会有什么阻碍。
初始化 Electron 项目和 Vue 项目
Electron 项目推荐跟着 Electron 快速入门 来搭建，简单易上手。
Vue 项目推荐使用 create-vue 脚手架来搭建，也是简单易上手，毕竟我们的目标是快速开发应用。
整合 Electron 和 Vue
当两个项目初始化成功，那接下来的最大问题就是，如何同步开发与打包。
同步开发
练习了 Electron 快速入门 的人，自然会记得创建窗口的 createWindow 方法内，win 对象调用的 loadFile 方法，它的入参是一个地址。
而我们本地运行的 Vue 项目也提供了一个本地地址，http://localhost:5173/。
没错，我们可以直接把这个地址作为入参传入 loadFile 方法，实现同步开发，不用在每次 Vue 更新代码后重新打包。
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadFile("http://localhost:5173/");
};同步打包
开发的时候，可以使用本地地址，那打包的时候就不行了呀。Electron 项目是需要使用入口文件 index.html 的，如果 Vue 项目在项目文件夹内打包，Electron 项目肯定是引用不到的，那该如何解决这个问题呢？
也很简单，直接修改 Vite 的配置文件，将输出路径改为 Electron 的根目录。之所以是根目录，是因为放在别的路径下，Electron 并不能很好的识别到依赖文件并进行打包，当然也可能是因为我还没有完全了解 Electron 的配置。
网上有推荐 electron-builder 插件包，来实现打包操作，但根据我的使用体验，electron-forge，这个官方的打包插件已经能满足我的需要了。
vue-app/vite.config.ts
import vue from "@vitejs/plugin-vue";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
base: "./",
build: {
outDir: "../electron-app",
emptyOutDir: false, // 这个很重要，别把Electron项目文件夹给清空了
},
plugins: [vue()],
});const NODE_ENV = process.env.NODE_ENV
const config = {
production: {
loadFile: path.join(__dirname, `./index.html`),
},
development: {
loadFile: 'http://localhost:5173/'
},
}
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
});
win.loadURL(config[NODE_ENV]?.loadFile || path.join(__dirname, `./index.html`));
};编写 package.json 文件
这个 package.json 文件并不是 Electron 项目或者 Vue 项目的，而是属于包裹着这两个项目的 npm 项目的配置文件。
我们需要编写安装，运行，打包三个命令。
大致目录结构如下：
─electron-template
├─electron-app
├─vue-app
└─package.json安装
没什么好说的，&& 串行执行。
{
"scripts": {
"electron:install": "cd ./electron-app && yarn install",
"vue:install": "cd ./vue-app && yarn install",
"all:install": "yarn vue:install && yarn electron:install"
}
}运行
cross-env 是运行跨平台设置和使用环境变量的脚本，创造一个全局环境变量，主要用来区分开发与生产环境
concurrently 是前端工程化并行解决方案，就是并行运行多条命令
wait-on 是跨平台异步方式调用同步方法插件包，简单理解就是 async 和 await
{
"scripts": {
"electron:start": "wait-on tcp:5173 && cd ./electron-app && yarn start",
"vue:start": "cd ./vue-app && yarn dev",
"all:start": "cross-env NODE_ENV=development concurrently -k \"yarn vue:start\" \"yarn electron:start\""
}
}打包
看前面的解释 =_=
{
"scripts": {
"electron:build": "cd ./electron-app && yarn make",
"vue:build": "cd ./vue-app && yarn build",
"all:build": "cross-env NODE_ENV=production yarn vue:build && yarn electron:build"
}
}执行打包命令
在根目录执行all:build打包命令，如果在 Electron 项目根目录下出现 out 文件夹，就代表你打包成功。
yarn all:build打开里面的 exe 文件，如果你能看见以下截图画面，就代表你成功运行了 Electron 项目。
具体的代码可以到 我的仓库 查看。
