为ElectronJS + Vue配置热模块重新加载

Question

我有以下repository，我想让Hot Module Reload正常工作。

到目前为止，我已经能够：

• 启动应用
• 编译应用文件并使用编译后的文件运行光谱测试

我想要实现的是相应地更改webpack的配置，以便能够运行“ npm run dev”，并使应用程序以HMR开头。

如何使用当前的Webpack设置来实现？

关于该主题的任何其他答案都是针对反应项目的，这超出了我的理解，或者正在使用电子装填，这实际上并不是我想要的。

为什么不使用Vue CLI？

我尝试使用Vue CLI和插件vue-cli-electron-builder-builder，但是遇到以下问题：

• 它不支持摩卡咖啡
• 简单的光谱测试最多需要30秒
• 如果我想自定义任何内容，我将获得三个itesm来学习/阅读（Vue CLI，插件配置，支架）

电子webpack

我最初是通过跟随视频here使用此插件来实现相同目的的。我遇到了几个问题：

• 在我尝试该插件（3-4个月前）时，编译期间发生了错误，因为它不支持最新的Electron版本（最近发布了4.0）
• 当我试图了解如何使Spectron一起工作时，我浪费了数小时才意识到我无法覆盖/使用NODE_ENV变量，这使得为各种环境（测试，开发，生产）设置条件变得更加困难）。
• 当上述第一个问题解决后，HMR不再起作用
• 尽管遵循了文档，但是某些Webpack替代似乎没有生效。例如，我添加了overlay：true，它确实在应用程序运行时有效地渲染了错误的叠加层。但是任何减少编译噪声的尝试都没有效果。同样，要确定如何将Mocha指向正确的Webpack配置也不容易（我尝试了两者，都指向了供应商生成的配置，或者在根目录上使用了扩展配置，但徒劳无功）

如上所述，事实证明，我花了大量的时间来解决问题，而不是继续进行应用程序的构思。所有使事情变得更容易的工具要么在Windows上出现问题，要么在y依赖项的x版本中存在已知问题，或者只是简单地添加了我需要学习的开销以更好地解决设置问题（例如，electron-webpack）本身是一个工具，而不仅仅是一个插件，必须仔细阅读文档，因为它具有围绕项目结构和配置的自己的概念）。我花了更多的时间来学习辅助工具，而不是电子本身。

因此，我想通过一个基本示例来了解如何使HMR在主流程和渲染流程上工作，如果足够简单的话，它将避免我相信需要学习额外的工具或因版本而面临各种问题或操作系统。

要求：

• ElectronJS
• Vue
• 相对快速的e2e测试
• 单元测试
• 具有主要和渲染过程的HMR

Answer 1

我对你的建议是休假： 首先将Electron和Vue彼此分开。

其原因都是两个截然不同的项目。 我告诉你，因为我已经完成了非常相似的项目。

我完成的过程。 安装vue-cli link
npm install -g @vue/cli

运行vue ui，您将面对幻想的ui项目管理。 在项目创建过程中设置所需的内容。

在那之后，我运行了我的代码，并附带条件检查我们是否在开发中。
当我在开发人员中时，我会指向Vue Muck up服务器。

if (!app.isPackaged) {
   mainWindow.loadURL(`http://localhost:8081`);
   mainWindow.webContents.openDevTools({mode: 'undocked'});
} else {
   mainWindow.loadURL(`file://${__dirname}/index.html`);
}

并且在此选项中，HMR可以完美地工作。