我正在尝试使用快速 Handlebars 将数据传递到我的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”?任何帮助将不胜感激!
最佳答案
自 index.html
在你的 dist
中目录,您的静态路由将与您的 app.get('/*',
之前匹配。已到达路线。
不要将静态文件和模板放在同一目录中。
关于javascript - 使用 Express Handbars 为简单的 Node Web 应用程序传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58918589/