使用快速把手为简单的节点 webapp 传递数据答案

【问题标题】：Pass data with express handlebars for simple node webapp使用快速把手为简单的节点 webapp 传递数据
【发布时间】：2019-11-18 16:02:44
【问题描述】：

我正在尝试使用快速把手将数据传递到我的 index.html 页面，但它似乎不起作用。这是我的快速代码：

server.js 代码：

const express = require('express');
const app = express();
const expressHandlebars = require('express-handlebars');
const path = require('path');

app.engine('html', expressHandlebars({ defaultLayout: 'main' }));
app.set('view engine', 'html');

app.use(express.static('dist'));

app.get('/*', (request: any, response: any) => {
    response.render(path.resolve('dist/', 'index.html'), {
        testBars: 'TEST',
        layout: false
    });
});

app.listen(8080, () => {
    console.log('started');
});

index.html：

<!doctype html>
<html lang="en-US">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Test page</title>
</head>

<body>
 {{testBars}}
</body>

</html>

webpack.config.js：

'use strict';

const CopyPlugin = require('copy-webpack-plugin');
const NodeExternals = require('webpack-node-externals');

module.exports = {
    mode: 'production',
    entry: './src/app/server/server.ts',
    target: 'node',
    plugins: [
        new CopyPlugin([
            { from: './src/**/*.html', flatten: true }
        ])
    ],
    externals: [NodeExternals()],
    output: {
        filename: 'server.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [{ test: /\.ts$/, loader: 'ts-loader' }]
    }
};

当我运行服务器并提供索引页面时，它在页面上显示{{testBars}}，而不是字符串“TEST”。我使用 webpack 构建和捆绑/复制所有内容（上面的配置）。在 webpack 运行后，我的目录结构最终是“dist/server.js”和“dist/index.html”。

我做错了什么吗？为什么它不会在 index.html 中显示“TEST”？任何帮助将不胜感激！

【问题讨论】：

标签： javascript node.js typescript express webpack

【解决方案1】：

由于index.html 位于您的dist 目录中，因此您的静态路由将在之前匹配到您的app.get('/*', 路由。

不要将静态文件和模板放在同一个目录中。

【讨论】：

非常感谢！主要问题是将静态文件和模板放在同一目录中。我将 index.html 移至“dist/templates/”文件夹，现在可以使用了。