基于 Vite 搭建 Electron+Vue3 的开发环境

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前社区两大 Vue+Electron 的脚手架：electron-vue 和 vue-cli-plugin-electron-builder。都有这样那样的问题，且都还不支持 Vue3，然而 Vue3 已是大势所趋，Vite 势必也将成为官方 Vue 脚手架，下图是尤雨溪在开发好 Vite 之后与 webpack 之父的对话："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/1e\/1e48b2da2ae3544f34fd886cafb8d1aa.png","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"所以开发一个 Vite+Vue3+Electron 的脚手架的需求日趋强烈。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我前段时间做了一个，但是发现了一些与 Vite 有关的问题，比如：Vite 会把开发环境的 process 对象吃掉的问题。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这对于 web 项目来说问题不大，但对于我们的 Electron 项目来说，就影响很大了。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"今天我就把这个思路和实现方式的关键代码发出来供大家参考，同时也希望 Vue 社区的贡献者们，能注意到这个问题（给 Vue 官方的各个项目提 issue 真的是太难了，Electron 官方项目在这方面就做的很好，很 open、很包容）。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"环境"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"先用 Vite 创建一个 Vue3 的工程，这就是你的实际项目工程。接着安装几个 Electron 相关的依赖，最终我的工程下的依赖情况如下："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"null"},"content":[{"type":"text","text":"\"@vue\/compiler-sfc\": \"^3.0.0\", \"vite\": \"^1.0.0-rc.9\", \"vue\": \"^3.0.2\", \"vue-router\": \"^4.0.0-rc.1\", \"electron\": \"^11.0.2\", \"electron-builder\": \"^22.9.1\", \"electron-updater\": \"^4.3.5\", \"postcss-scss\": \"^3.0.2\", \"sass\": \"^1.27.0\",\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}