问题描述
我的Electron应用程序出现问题,重新加载本地文件失败。
Electron应用程序包装最初由create-react-app创建的React Web应用程序。 React应用程序是使用react-scripts构建的,整个构建文件夹(以及其他构建文件夹)然后使用Electron Forge打包,然后使用Squirrel Windows安装程序进行安装。文件夹结构如下:
React应用程序文件全部存在于此build
文件夹中,包括启动时Electron应用程序加载的index.html
。为了确保Electron可以正确找到我的文件,我在主electron.js
中使用以下代码拦截了文件协议:
protocol.interceptFileProtocol('file',(request,callback) => {
const url = request.url.substr(String('file://').length);
callback({ path: path.join(__dirname,'build',url) });
});
此代码可以很好地加载和浏览React应用,但是在某些情况下,我希望允许用户使用刷新按钮刷新页面。我尝试了多种重新加载方式,但是每次尝试都遇到相同的问题:请求失败,状态为(Failed) ERR_FILE_NOT_FOUND
。
我已经在Google的所有网站中搜索了存在相同问题的其他人,而我发现的最接近的是this SO post,这是由于路由问题导致重新加载失败。我怀疑这里也可能是这种情况。该应用程序使用React Router并最初使用browserRouter
。从那以后,我转而使用HashRouter
,它会创建类似index.html#/route/path
的链接。
我的应用程序具有/dashboard
路由,根路径(/
或index.html
)将自动重定向到该路由。我认为这是正在发生的事情:文件协议将正斜杠解释为文件路径中的其他文件夹,因此Electron尝试加载名为dashboard
的文件,而不是加载index.html
。它应该将哈希(#)之后的所有内容解释为URI fragment,但相反,它尝试加载显然不存在的文件。正常浏览该应用程序时,似乎没有file://
协议请求被提出,这解释了为什么仅在尝试重新加载时才出现此问题。
我确实发现this question关于访问本地文件的React路由。它似乎相关,但是它没有使用文件协议拦截,这似乎在影响我的结果。
最后要提出一个具体的问题:我如何告诉Electron我试图在文件末尾加载一个URI片段,而又没有试图将该片段解释为文件路径的一部分?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)