获取 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 加载路由?的主要内容,如果未能解决你的问题,请参考以下文章