使用 express 作为提要时如何打包电子应用程序？答案

【问题标题】：How do I package an electron app when using express as the feed?使用 express 作为提要时如何打包电子应用程序？
【发布时间】：2019-12-31 19:02:44
【问题描述】：

我正在尝试使用 electron-packager 构建一个电子应用程序，虽然它成功构建，但当我尝试打开它时，我收到一个错误，它无法访问我的 index.ejs 文件。

我没有尝试任何修复它，但我怀疑它可以通过不使用 express 来修复，但这不是一个选项，因为我需要 express 来获取电子应用程序所需的 API。

我的 Index.js

const express = require('express');
const exp = new express();

// Electron 
const {app, BrowserWindow} = require('electron');

// Making the window 
function appReady() {
    mainWindow = new BrowserWindow({
        width: 550,
        height: 350,
        autoHideMenuBar: true,
        useContentSize: true,
        resizable: false
    });
    mainWindow.loadURL('http://localhost/');
    mainWindow.focus();
}

// Actually starting the app 
app.on('ready', appReady);

// Express 
const AEStxt = require('./AES.json')

exp.set('json spaces', 2);

exp.get('/api', function (req, res) {
    res.json({
        MainAES: AEStxt.MainAES
    });
});

// Pretty page 
exp.engine('html', require('ejs').renderFile);

exp.use(express.static(__dirname));

exp.get('/', function (req, res) {
    res.render('./index.ejs', {mainaes: AEStxt.MainAES, aes1003: AEStxt.Pak1003});
});

exp.listen(process.env.PORT || '80', () => {
    console.log('Listening on 80');
});

我的视图/index.ejs 文件

<!DOCTYPE html>
<html>
    <head>
        <style>
            #pakmaintext {
                margin-top: 20px;
                color: white;
                font-family: Burbank;
                font-size: 18px
            }

            #pak1003text {
                margin-top: 30px;
                color: white;
                font-family: Burbank;
                font-size: 18px
            }

            body {
                background: url(gradient.jpg);
                background-size: 100%;
            }

            @font-face {
                font-family: 'Burbank';
                src: url(fonts/Burbank.ttf);
            }

            button {
                margin-top: 20px;
            }
        </style>
        <script>
            function myFunction() {
                var x = document.getElementById("mainpakdiv");
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "none";
                }
            }
        </script>
    </head>
    <body>
        <center>
                <button onclick="myFunction()">v10.10 Main AES</button>

                <div id="mainpakdiv">
                    <p id='pakmaintext'><%= mainaes %></p>
                </div>

                <div id="aes1003div">
                    <p id="pak1003text"><%= aes1003 %></p>
                </div>
        </center> 
    </body>
</html>

预期的是，当我构建并打开电子应用程序时，它会加载我漂亮的页面，但我得到的是Error: Failed to lookup view "./index.ejs" in views directory "C:\Users\path to project dir\views"

谢谢，山姆。

【问题讨论】：

标签： node.js express electron

【解决方案1】：

EJS 与 Express 的集成比您所做的更自然：

安装 EJS (npm i ejs)
在 Express 中配置视图引擎 (exp.set('view engine', 'ejs');)
渲染一个 EJS 视图 (res.render('index', { ... }))，注意不需要相对路径或显式扩展。

【讨论】：

我想你不明白，我正在使用 EJS 和 express，而我的电子应用程序只是加载那个 express 页面。
@SamHep0803 啊没问题，如果它是嵌入到 Electron 应用程序中，那么 static 部分应该不是问题。
你有意见不和@James 吗？
@SamHep0803 不抱歉
好的，我试过你说的，我现在收到Error: No default engine was specified and no extension was provided.

【解决方案2】：

阅读this解决了我的问题。

将以下行添加到您的 index.js 文件中。

app.set('view engine', 'ejs');
app.set("views", path.join(__dirname, "views"));

【讨论】：