Electron 與 Vue.js，不使用樣板

Question

不使用像electron-vue這樣的預先存在的樣板，我想用 Vue.js 設置一個 Electron 應用程序。 這樣做的程序是什么，特別是對於初學者？

到目前為止，我已經使用 NPM 全局安裝了 vue cli，使用vue create創建了我的項目，然后使用npm install electron安裝到其中。

從這里開始，一切都分崩離析。 我正在關注的文章指定使用 dev 啟動應用程序，它運行： "NODE_ENV=DEV vue-cli-service serve & sleep 5 && NODE_ENV=DEV electron app.js" 。 無論出於何種原因，這都行不通。 文章的評論似乎表明這些命令是 linux 格式的，但沒有人提供等效的 windows 格式。

electron . 按預期啟動應用程序，但 vue 組件不起作用。 添加一個基本的<script src=">標簽到 index.html 頂部的 vue CDN 工作，並使其工作，但理想情況下我希望電子應用程序離線工作，我認為這是重點使用 vue-cli 而不是從 CDN 導入它。

有沒有一種簡單的方法可以做到這一點？ 還是我最好手動下載 vue，將其放入電子應用程序的文件夾中，然后使用腳本標簽加載它？

Answer 1

使用 vue.js 作為前端框架創建 Electron 應用程序的最簡單方法：

1. 安裝 vue-cli 3：

npm install -g @vue/cli

2. 創建一個項目（請耐心等待，因為這可能需要一段時間）：

vue create myproject

cd myproject

3. 添加並調用 vue-cli-plugin-electron-builder 的生成器（它會自動為您設置電子並讓您檢查更改的文件）：

vue add electron-builder

4. 測試您的應用程序：

npm run electron:serve

或構建您的應用程序：

npm run electron:build

在本指南中查看更多信息： https : //nklayman.github.io/vue-cli-plugin-electron-builder/guide/#to-start-a-development-server

Answer 2

如果vue-cli-sevice和electron所有 PATH 變量都正確，這在 Windows Powershell 中有效：

set NODE_ENV=DEV ; vue serve ; timeout 5 ; electron app.js

注意新版vue改變了一些命令：

https://cli.vuejs.org/guide/installation.html

Windows 命令幫助：

從命令提示符設置和獲取 Windows 環境變量？

如何在 Windows CMD 中的一行中運行兩個命令？

---

最終解決問題的是將相對路徑更改為絕對路徑。

這也很有用： https : //nklayman.github.io/vue-cli-plugin-electron-builder/