基於 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}}]}