获取 Electron 生产窗口以使用 loadURL 加载路由?

Posted

技术标签:

【中文标题】获取 Electron 生产窗口以使用 loadURL 加载路由?【英文标题】:Get Electron production window to load a route with loadURL? 【发布时间】:2021-03-10 19:32:30 【问题描述】:

我已经成功构建了我的 react/electron 应用程序并让它在本地运行。但是,我的应用程序的“默认”路由是/app,所以当我的应用程序在本地运行时,什么都没有显示。这就是我所拥有的:

public/main.js:

function createWindow() 
  mainWindow = new BrowserWindow(
    width: 400,
    height: 400,
    show: true,
    frame: false,
    transparent: true,
    webPreferences: 
      nodeIntegration: true,
      preload: `$__dirname/preload.js`,
    ,
  );
  const startURL = isDev
    ? "http://localhost:3000/app"
    : `file://$path.join(__dirname, "../build/index.html")`;

  mainWindow.loadURL(startURL);

  mainWindow.once("ready-to-show", () => 
    // mainWindow.show()
    mainWindow.setSize();
  );
  mainWindow.on("closed", () => 
    mainWindow = null;
  );

app.on("ready", createWindow);

src/index.js:

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Route path="/app" exact component=App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

我正在使用 react-router 来完成这项工作。这在本地有效,只是在生产中无效。为了测试这一点,我将path="/app" 更改为path="/" 并删除了exact,构建它,它按预期工作。但是,我确实希望它指向那个特定的 /app 路由,因为我希望其他不相关的窗口位于其他端点。如何让构建正确识别这一点?我尝试将package.json 中的homepage: "./" 更改为homepage: "./app",但这并没有改变任何东西。

编辑:我确实尝试将 startURL 更改为 file://$path.join(__dirname, "../build/index.html#/app")(添加 #/app,正如 this answer 所建议的那样),但这也没有用......

【问题讨论】:

【参考方案1】:

原来这个答案有两个部分;第一个是错字。代替#/app,添加#app 是正确的(因此完整的字符串变为file://$path.join(__dirname, "../build/index.html#app"))。

另一个问题显然与 react-router-dom 和 BrowserRouter 有关;它在生产中不起作用。所以我有这个:

if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") 
  ReactDOM.render(
    <React.StrictMode>
      <BrowserRouter>
        <Route path="/app" exact component=App />
      </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
  );
 else 
  ReactDOM.render(
    <React.StrictMode>
      <HashRouter>
        <Route path="/app" exact component=App />
      </HashRouter>
    </React.StrictMode>,
    document.getElementById("root")
  );

HashRouter 在 dev 中不起作用,因此需要这段代码。

【讨论】:

以上是关于获取 Electron 生产窗口以使用 loadURL 加载路由?的主要内容,如果未能解决你的问题,请参考以下文章

electron 在windows下窗口为啥不能拖动

如何自定义Electron应用程序的窗口标题栏?

win全屏窗口化动态修改分辨率和获取屏幕支持的所有分辨率

Electron应用在任务栏中创建闪烁窗口

在浏览器中打开来自 Electron 的链接

无星的electron之旅(八)—— 坐标