Nex.js 的 Electron 应用程序（无法加载 html 文件）

Question

我正在使用 Next.js 和 electron-next 包构建一个 electron 应用程序，以便 Electron 可以处理 Next.js 中的 "ouput" 文件夹。该应用程序非常适合开发（对所有人进行简单 html "hello world" 测试）；然而，当我用 electron-builder 打包应用程序时，页面没有加载，DevTools 说它无法加载本地文件。我可以看到 electron-builder 生成的文件，但在任何地方都找不到静态 html 文件。有什么我想念的吗？ *.asar 文件中是否包含静态文件？

这是针对 Windows 10 下的 Electron。下面我展示了 electron-builder 的 package.json 文件设置，以及在应用程序入口文件 (index.js)

上打开初始 HTML 文件的调用

// ---------package.json----------
 "scripts": {
    "start": "electron .",
    "build": "next build renderer && next export renderer",
    "dist": "npm run build && electron-builder"
  },
  "build": {
    "files": [
      "**/*",
      "renderer"
    ]
  },

// --------index.js----------
  // I can confirm that /renderer/out/start.html file is created

  const devPath = "http://localhost:8000/start"
  const prodPath = path.resolve('renderer/out/start.html')

  const entry = isDev ? devPath : ('file://' + prodPath)

  console.log(entry)
  win.loadURL(entry)

这是我得到的错误：

不允许加载本地资源：file:///C:/Users//Desktop/text_exc_app/dist/win-unpacked/resources/renderer/out/start.html

Answer 1

我从另一个 post 那里发现你也可以这样做（使用 app.getAppPath()）：

const prodPath = path.join(app.getAppPath() ,'renderer/out/start.html')

这解决了我的问题！

我仍然不确定这两种访问文件的方式有何区别，以及为什么一种有效而另一种无效。

Nex.js 的 Electron 应用程序（无法加载 html 文件）

Electron app with Nex.js (loading html files not working)

electron

electron-builder

next.js