带有 Nex.js 的电子应用程序（加载 html 文件不起作用）答案

【问题标题】：Electron app with Nex.js (loading html files not working)带有 Nex.js 的电子应用程序（加载 html 文件不起作用）
【发布时间】：2019-11-30 15:21:26
【问题描述】：

我正在使用 Next.js 和 electron-next 包构建一个电子应用程序，以便 Electron 可以处理来自 Next.js 的“输出”文件夹。该应用程序非常适合开发（适用于所有人的简单 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

【问题讨论】：

SSR 在带宽有限（移动）和 SEO 时最有趣的是首次绘制时间。对于电子应用程序，两者都无关紧要。虽然没有什么能阻止你继续做 SSR，但你可能会遇到很多毫无价值的问题。
我同意你的看法。我正在尝试将其作为一种能够使用 React 制作电子应用程序的方法。我之前尝试过使用 create-react-app 的方法，但想尝试其他方法，因为它有点麻烦

标签： electron next.js electron-builder

【解决方案1】：

我从另一篇文章中发现您也可以这样做（使用 app.getAppPath()）：

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

这解决了我的问题！

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

【讨论】：