vue + electron

### Vue 结合 Electron 开发桌面应用教程

#### 环境准备

为了确保开发环境的兼容性和稳定性，在开始之前需确认 Node.js 和 Electron 的版本号[^1]。建议按照官方文档中的指导安装最新稳定版的 Node.js 和 Electron，这有助于减少潜在的技术难题并提高项目的可维护性[^2]。

#### 创建项目结构

创建一个新的 Vue CLI 项目作为基础框架：

vue create my-electron-app
cd my-electron-app

接着配置 `package.json` 文件来集成 Electron 构建工具链。可以参照已有的成功案例设置合适的依赖项和脚本命令，比如使用特定版本组合如 elctron29.0.0, node18.19.0, vuecli5.0.8 及其对应的构建指令[^3]。

#### 安装必要的依赖包

通过 npm 或 yarn 添加所需的 Electron 相关模块到项目中:

npm install electron --save-dev

对于更复杂的场景可能还需要额外安装其他辅助库，例如用于打包应用程序的 `electron-builder` 或者处理原生文件系统的插件等。

#### 修改 Webpack 配置

为了让 Vue 应用能够顺利运行于 Electron 主进程中，通常需要调整默认Webpack配置以支持Node.js环境下的特性访问。可以通过修改 `.env.development.local` 来指定公共路径 (publicPath)，以及利用 `vue.config.js` 自定义规则实现这一点。

#### 编写主进程代码

在 src/main 下新建 main.ts 或 main.js 文件编写Electron主程序逻辑，初始化窗口实例，并加载渲染页面。注意这里涉及到的安全策略设定非常重要，应该遵循最佳实践指南来进行安全防护措施部署。

#### 启动与调试

完成上述准备工作之后就可以尝试启动整个项目了。一般情况下会有一个专门用来启动Electron的应用入口命令，形似如下形式：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build", // 打包成exe
    "electron:serve": "vue-cli-service electron:serve"
}

执行 `npm run electron:serve` 即可在本地环境中预览效果；而当准备好发布时，则可通过 `npm run electron:build` 将项目编译为独立的桌面客户端软件。