javascript - VueJS、Electron 和 Webpack 的问题(热重载)-6ren

javascript - VueJS、Electron 和 Webpack 的问题(热重载)

转载作者：行者123 更新时间：2023-12-03 03:24:32

27

4

我一直在开发一个涉及 Electron、VueJS 的新项目，并且我正在使用 Webpack 来实现 HMR 功能...我的问题是热模块替换功能由于某种原因无法正常工作。

我有以下配置:

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    // publicPath: '/dist/',
    filename: 'build.js',
  },
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.common.js',
    },
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css/,
        loader: 'style-loader!css-loader',
      },
    ],
  },
  plugins: [
    new webpack.ExternalsPlugin('commonjs', [
      'electron',
    ]),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.LoaderOptionsPlugin({
      babel: {
        'presets': ['env'],
        'plugins': ['transform-runtime'],
      },
    }),
  ],
};

index.html(Vue 的挂载点)

<!DOCTYPE html>
<html>

  <head>
    <title>Hermes - Empyrion Environment Editor!</title>
    <style>
      body {
        background-color: #222222;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="root"></div>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
  </body>

</html>

index.js(Electron初始化等)

const electron = require('electron');
const { app, BrowserWindow } = electron;

// Main Window Handle
let mainWindow;

app.on('ready', () => {
  let mainWindow = null;
  const loadingWindow = new BrowserWindow({
    width: 325,
    height: 425,
    frame: false,
    show: false,
  });
  loadingWindow.once('show', () => {
    mainWindow = new BrowserWindow({
      width: 1024,
      height: 768,
      minWidth: 1024,
      minHeight: 768,
      show: false,
    });
    mainWindow.webContents.once('dom-ready', () => {
      mainWindow.show();
      loadingWindow.hide();
      loadingWindow.close();
    });
    mainWindow.loadURL(`file://${__dirname}/index.html`);
    mainWindow.on('closed', () => {
      mainWindow = null;
    });
  });
  loadingWindow.loadURL(`file://${__dirname}/loading.html`);
  loadingWindow.show();
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    mainWindow = new BrowserWindow({
      width: 1024,
      height: 768,
      minWidth: 1024,
      minHeight: 768,
      show: true,
    });
    mainWindow.webContents.once('dom-ready', () => {
      mainWindow.show();
    });
    mainWindow.loadURL(`file://${__dirname}/index.html`);
  }
});

我不确定我做错了什么。如果我使用 http://localhost:8080/dist/build.js在index.html ，该应用程序可以在 Electron 中运行，但没有热重载功能(需要刷新页面)...但是如果我使用 http://localhost:8080/webpack-dev-server.js (我认为这就是我应该使用的)，加载时应用程序中没有任何内容，只是一个空白窗口。

当我运行 webpack 开发服务器 ( webpack-dev-server --hot --inline ) 时，我在 JS 控制台中得到以下输出，但应用程序未加载(在浏览器中测试:

[WDS] Hot Module Replacement enabled.

它的表现就好像 HMR 确实在工作，但应用程序的其余部分无法加载。如果我前往http://localhost:8080/loading.html不过，这按预期工作。我只能假设我没有使用 <script> 引用正确的文件标签 index.html .

任何帮助将不胜感激。我唯一能想到的是，也许它不喜欢 file:// loadURL() 的路径在 Electron 初始化中。提前致谢!

最佳答案

我建议您使用electron-webpack它提供了您所要求的功能。我已经 fork 了their boilerplate使用 VueJS 实现，您可以在这里查看 https://github.com/kontrollanten/electron-webpack-quick-start

关于javascript - VueJS、Electron 和 Webpack 的问题(热重载)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46394916/

27

4

0

文章推荐： javascript - Electron Windows 商店 : How to correctly specify the data?

文章推荐： javascript - Sinon - 监视构造函数方法

文章推荐： javascript - 每当我的 if 条件为假时， Canvas 就会变成空白

C++:重载 != When == 重载
假设我有一个类，我在其中重载了运算符 == : Class A { ... public: bool operator== (const A &rhs) const; ... };
c++ - 为什么 std::map 没有 find/lower_bound 重载，std::list 没有 sort 重载？
我知道你不应该使用 std::find(some_map.begin(), some_map.end()) 或 std::lower_bound，因为它会采用线性时间而不是 some_map.lowe
haskell - 重载(+)
我正在尝试在 Haskell 中定义 Vector3 数据类型，并允许在其上使用 (+) 运算符。我尝试了以下方法: data Vector3 = Vector3 Double Double Doub
C++ 重载 `-`
我已经为我的类图将运算符重载为“-”。它的用途并不完全直观(糟糕的编码 - 我知道)但是如果我做 graph3 = graph2-graph1 那么图 3 是应该只接收图 2 和图 1 中的那些顶点。
C++重载
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Operator overloading 我想重载以按字母顺序排列字符串，但我不确定该怎么做。如何再次
C++重载
下面的代码给我一个编译错误。谁能告诉我为什么？ class mytype { public: int value; mytype(int a) { value = a;
Ruby += 重载
这有什么问题吗？ class Vec2 attr_accessor :x, :y # ... def += (v) @x += v.x @y += v.y retu
c++ - 运算符 [][] 重载
是否可以重载 [] 运算符两次？允许这样的事情:function[3][3](就像在二维数组中一样)。如果可能的话，我想看看一些示例代码。最佳答案您可以重载 operator[] 以返回一个对象
lua 重载 : possibilities?
我的团队目前正在与 Lua 合作，创建一个 android 游戏。我们遇到的一件事是表面上无法创建重载构造函数。我习惯于使用默认值设置一个对象，然后在需要时使其过载。前任: apples() {
CSS 样式继承/重载
我有一个网页，在某个时候显示一个导航栏，它只不过是一个 a 元素的列表 (ul)。所述 a 元素的大多数样式规则都是通用的。唯一应该改变的部分是要显示的图像，可以从列表中每个 li 元素的 id 标签
F# (.. ..) 运算符使用/重载
我对使用/重载“范围步长”运算符(.. ..)很感兴趣，但我终其一生都无法了解如何使用它。在文档中它说 // Usage: start .. step .. finish 但是在 F# shell
Java静态多态(重载)和泛型之间的继承
Java 11(可能无关紧要): public static String toString(Object obj) { return ReflectionToStringBuilder.to
.net - 重载、覆盖和隐藏？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
java - 无法理解java中的继承和覆盖/重载
我无法理解以下代码(针对行号进行注释) class Base { void m1(Object o) { } void m2(String o) { } } publi
c++ - 关于运算符+重载
我有以下代码片段: #include using namespace std; struct Integer{ int x; Integer(const int val) : x(v
c++ - 重载=运算符时如何获取数组的长度
class myclass{ //definitions here }; myclass e; int myarray[10]; /* Do something... */ e = myarray;
c++ - 使用好友功能进行Operator []重载
为什么不能将下标运算符(operator [])作为 friend 函数重载？最佳答案正如Bjarne Stroustrup在D&E book中所说: However, even in the o
c++ - 关于运算符+重载
我有以下代码片段: #include using namespace std; struct Integer{ int x; Integer(const int val) : x(v
c++ - 重载<<运算符导致其模棱两可
因此，我有一个问题是我最近尝试重载 namespace Eng { /** * A structure to represent pixels */ typedef
java - 重载 onResume()
如何重载onResume()以正确的方式工作？我想从 activity 返回到 MainActivity ，我希望在其中具有与应用程序启动后相同的状态。我想使用 recreate() 但它循环了或者类

首页

博学

6Ren·AI

商城

javascript - VueJS、Electron 和 Webpack 的问题(热重载)