Question

让我的应用程序作为单页应用程序工作时遇到麻烦。我正在使用帕格作为模板引擎。

以下是该应用的一般结构：

/app
/app/index.js // source of the app
/app/index.html
/app/bundledApp.js // from running webpack command
/app/components
/app/components/loginPage
/app/components/welcomePage
/app/config/routes.js

这是我的index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="bundledApp.js"></script>
</body>
</html>

index.js文件：

const express = require('express');
const app = express();
const server = require('http').Server(app);
const port = 3000;

app.set('view engine', 'pug');
app.use('/', routes);

server.listen(port, (err) => {
    if (err) {
        throw err;
    }
    console.log(':)');
});

router.js文件：

const express = require('express');
const welcomePage = require('../components/welcomePage');
const login = require('../components/loginPage');
const router = express.Router();

router.route('/').get(welcomePage.welcomePage);
router.route('/login').get(login.loginPage);

module.exports = router;

第1号失败：

尝试添加index.js：

app.use('/', express.static(__dirname + '/'));
app.get('/*', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

但是当我运行应用程序时，我进入控制台：

bundledApp.js:736 Uncaught ReferenceError: require is not defined

第2号失败：

我尝试使用express-spa包（https://www.npmjs.com/package/express-spa），只是在index.js中需要它并添加：

app.use(spa());

但在浏览器中，我在进入http://localhost:3000时进入控制台：

Uncaught SyntaxError: Unexpected token <

bundledApp.js

中的

对于welcomePage视图，我的pug文件如下所示：

extends ../mainLayout/mainLayout  // just a HTML5 template file

block title
    title Welcome Player!

block content
    a(href='/login') Go to login page

应用程序本身运行良好，但我不会像SPA页面那样表现而是在转到不同的URL时刷新页面。我的方法中缺少什么？

这里还有一个webpack.config.js文件：

const webpack = require('webpack');
const path = require('path');

let config = {
    entry: '/app/index.js',
    target: 'node',
    output: {
        path: path.join(__dirname, '/app/index.js'),
        filename: 'bundledApp.js'
    }
};

module.exports = config;

感谢所有帮助人员！：）

Answer 1

您需要使用informe来表达您的文件使用express.static的位置，如下所示：

app.use(express.static("app"));

更多信息here。

Node.js + Express - 无法使app成为SPA工作

第1号失败：

第2号失败：

1 个答案: