在启动我的个人项目 MiraMate 客户端的开发时，我面临着一个核心挑战：作为一名独立开发者，精力有限，我需要一个能够同时适配桌面端和移动端的跨平台解决方案。这篇文章记录了我在技术选型过程中的探索、遇到的障碍以及最终的解决思路。
最初的设想：一套代码，三个平台
我的目标非常明确：开发一款聊天应用，需要覆盖 Windows、Android 和 iOS。为了避免维护多套独立的代码，我将目光投向了跨平台框架。
考虑到我对 Web 前端技术栈更为熟悉，并且这类技术迁移成本较低，我首先锁定了 WebView 类型的方案。对于一个功能相对简单的聊天应用来说，WebView 带来的些许性能损耗是完全可以接受的。
在一番调研后，我发现了 Capacitor 这个框架。它提供的特性非常有吸引力：
- 封装了统一的 API 来调用 Android 和 iOS 的原生功能。
- 更重要的是，它拥有一个名为
electron-capacitor的插件。
electron-capacitor 插件看起来是一个很理想的方案，它有望让我用同一套代码构建出 Windows、Android 和 iOS 三个平台的应用。这对我来说，意味着可以极大地提升开发效率。
紧接着，我确定了具体的技术栈：Vue3 + Vite + TypeScript。尽管当时我对 Vue 和 TypeScript 并不算精通，但 Vue 的易上手和 TypeScript 的类型安全优势让我下定了决心。
第一个障碍：被废弃的插件
万事俱备，我开始着手搭建开发环境。然而，第一个障碍很快就出现了。
我尝试创建一个新的 Capacitor 项目，并集成 electron-capacitor 插件。由于对这套技术栈不熟悉，我一边学习一边实践，花费了数小时进行尝试。然而，在安装 electron-capacitor 插件的环节，我遇到了一个难以解决的错误。
在屡次碰壁后，我决定去它的 GitHub 仓库一探究竟，结果发现：
这个项目在两年前就已经停止了更新。
这很可能意味着它已经无法与当前新版本的 Capacitor 及其他依赖兼容。因此，这个“一套代码通吃”的方案是行不通了。我不得不放弃最初的设想。
改变航向：解耦与分治
尽管最初的计划无法实现，但开发还得继续。我迅速调整了规划：
- 桌面端 (Windows): 使用纯 Electron 开发。
- 移动端 (Android/iOS): 使用 Capacitor 开发。
幸运的是，我之前有过一些 Electron 的开发经验，这为后续的桌面端开发提供了一定帮助。
为了尽可能地减少重复工作量，我制定了一个核心策略：在代码层面彻底解耦 UI/UX 层和核心逻辑层。
这样一来，当我未来将应用迁移到同样基于 WebView 的 Capacitor 平台时，大部分核心逻辑代码都可以直接复用。我只需要为移动端重新设计和实现 UI/UX 部分，就能显著减少未来的迁移工作量。
另一个插曲：ESM 的配置细节
在进行 Electron 开发的过程中，我又遇到了一个小问题。为了代码的现代化和更好的浏览器环境兼容性，我打算全面采用 ESM (ECMAScript Modules) 语法。
然而，我发现在 Electron 的主进程（main）和预加载脚本（preload）中，ESM 模块就是无法正常工作。经过几个小时的排查，我最终在 Electron 的官方文档中找到了答案：
在 Electron 中，如果主进程和预加载脚本要使用 ESM，其文件扩展名必须是
.mjs。
这是一个很容易被忽略的细节，却也花了我几个小时才定位到。这个小插曲也再次提醒我，仔细阅读官方文档的重要性。
虽然 MiraMate 的开发之路开局遇到了一些波折，但这些经历让我对技术选型、项目规划和风险评估有了更深刻的理解。开发本身就是一个不断遇到问题、解决问题的过程，而每一次解决问题的过程，都是宝贵的学习机会。