如何使用电子通过文件：/// 正确加载我的角度应用程序？

Question

我有一个简单的 Angular 应用程序，它位于我项目的 www 文件夹中。当我通过 http:// 服务器或虚拟主机运行它时，它在浏览器中工作正常。但是index.js 将其加载为文件

mainWindow.loadUrl('file://' + __dirname + '/www/index.html'); 

所以当我双关语electron . 它显示空白窗口。我试图通过 file:/// 在 Chrome 浏览器中打开我的index.html，它也是空白的。控制台报错

XMLHttpRequest 无法加载 file:///Users/Sergey/Sites/Electron-test/www/partials/layout.html。跨域请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。（匿名函数）@ angular.js:10722

这是因为在路由器 ui 上

$stateProvider.state("app", {
    url: '/',
    templateUrl: 'partials/layout.html'
});

图像还有一些其他相同的错误。

我想有两种解决方案。

1. 使用节点运行服务器并将loadUrl('file:///...') 更改为loadUrl('http:///...')，但我不知道该怎么做。
2. 做点别的。可能是一些允许跨源请求的标头或参数，我不知道该怎么做。

我该如何解决这个问题？

Answer 1

一段时间后，我想出了如何做到这一点，现在 Electron 构建了应用程序并且它运行完美。这里是以电子为起点消耗的整个index.js。

'use strict';
var http = require('http');
var path = require('path');
var fs = require('fs');
var app = require('app');
var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

app.on('window-all-closed', function() {
    if(process.platform != 'darwin') {
        app.quit();
    }
});

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    var server = http.createServer(requestHandler).listen(9527);

    mainWindow.loadUrl('http://localhost:9527/index.html');
    mainWindow.webContents.on('did-finish-load', function() {
        mainWindow.setTitle(app.getName());
    });
    mainWindow.on('closed', function() {
        mainWindow = null;
        server.close();
    });
});

function requestHandler(req, res) {
    var
        file    = req.url == '/' ? '/index.html' : req.url,
        root    = __dirname + '/www',
        page404 = root + '/404.html';

    getFile((root + file), res, page404);
};

function getFile(filePath, res, page404) {

    fs.exists(filePath, function(exists) {
        if(exists) {
            fs.readFile(filePath, function(err, contents) {
                if(!err) {
                    res.end(contents);
                } else {
                    console.dir(err);
                }
            });
        } else {
            fs.readFile(page404, function(err, contents) {
                if(!err) {
                    res.writeHead(404, {'Content-Type': 'text/html'});
                    res.end(contents);
                } else {
                    console.dir(err);
                }
            });
        }
    });
};

这是一个起点。您所要做的就是更改root 参数以指示您的index.html 根文件夹。但我敢肯定，如果你构建通用应用程序，它将是www。