搭建 vue + vite + electron 项目

这里首页要确保电脑中有 node 环境

这里我们的环境版本是：
按下win + R 输入 cmd 回车，在命令提示符中输入 node -v 可查询 node 版本、输入 pnpm -v 可查询 pnpm 的版本
node v16.17.0
pnpm 7.29.1

接下来我们使用 cmd 打开一个文件夹，输入命令创建一个 vite 项目

输入命令创建一个 vite 项目 pnpm create vite

输入 cd vue-vite-electron
输入 pnpm install 安装项目依赖
输入 pnpm add -D electron 安装 electron

现在我们看 package.json dev 脚本只执行了 vite 并不能启动 eletron，在这里我们需要安装 concurrently 包。

pnpm add -D concurrently

然后修改 "dev": "vite” 为 "dev": "concurrently "vite" "electron ."" 此时输入 pnpm run dev 即可启动 vite 和 electron 项目，注意不要忘了配置主进程的脚本文件。

在项目根目录下创建 main.js (如果要使用 CommonJS)是应为 main.cjs，并在 package.js 中添加"main": "main.cjs"。

并在 main.js 中添加

const { BrowserWindow,app } = require('electron');

const createWindow = () => {
  const win = new BrowserWindow();
  // http://127.0.0.1:5173/ 为 vite 项目的启动地址
  win.loadURL('http://127.0.0.1:5173/');
};

app.whenReady().then(()=>{
  createWindow();
});

此时 package.js 应为

此时关于项目的配置就完成了修改 App.vue 中的 <HelloWord msg="Vite + Vue" /> 为 <HelloWorld msg="Vite + Vue + Electron" />
输入 pnpm run dev 启动项目

可以看到项目启动成功