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/