javascript - Electron + Angular = 没有本地文件？

Question

我的问题很难解释，但我会尝试 - 尝试从应用程序目录播放 mp3 文件时，出现 Electron 错误不允许加载本地资源。

发生这种情况是因为我使用 Webpack 进行开发，使用 Express 服务器进行生产来运行我的应用程序(由于某些 Angular 路由功能而使用 Express)。

这是我的 electron-main.js 的一部分 -

function createWindow() {
    win = new BrowserWindow({
    width: 1500,
    height: 900,
    resizable: true,
    center: true,
    autoHideMenuBar: true,
    icon: path.join(__dirname, 'static', 'note.ico')
  });

   if (DEBUG) {
     // Loading from Webpack
     win.loadURL(`http://localhost:4200`);
     win.webContents.openDevTools();
   }
   else {
     // Loading from Express-server
     const server = require("../server");
     win.loadURL(`http://localhost:3333`);
   }

服务器.js

let path = require('path');
let express = require('express');
let app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3333);

但是当我尝试设置时

win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));

我已经播放了 mp3。

所以我明白只有当 protocol: 'file:' 时才能访问本地文件，而不是 http: 应用程序结构应该相似 -

(root folder)
--app.exe (whatever)
--mp3
  --1.mp3
  --2.mp3
  --3.mp3
  ...

有解决办法吗？也许我可以使用 Express 来获取我的文件？

Answer 1

我发现的唯一解决方法是使用 file: 协议(protocol)创建额外的隐藏窗口，如下所示

hiddenWindow = new BrowserWindow({
  show: false
});

hiddenWindow.loadURL(url.format({
  pathname: path.join(__dirname, 'hidden.html'),
  protocol: 'file:',
  slashes: true
}));

并使用ipcRenderer和ipcMain初始化它的函数。