Question

我已将express配置为使用 swig 作为模板引擎，将 / public 配置为视图目录，并使用静态中间件：

app.engine('html', engines.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/public');
app.use(express.static('public'));

然后我配置了Express app以这种方式收听请求：

app.use('/',(req,res)=>{
    res.render('index', {
       title: 'ciao'
    });
})

在我的模板中，我有类似

的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <% for (var chunk in htmlWebpackPlugin.files.css) { %>
        <link rel="preload" href="<%= htmlWebpackPlugin.files.css[chunk] %>"  as="style">
    <% } %>
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
        <link rel="preload" href="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" as="script">
    <% } %>
</head>
<body>
    <h1>{{ title }}</h1>
</body>
</html>

但＆＃34; title＆＃34;没有被＆＃34; ciao＆＃34;取代并按原样呈现。

这应该是一种常见的情况，所以我可能会遗漏一些东西。谢谢你的帮助!!!! ;）

解：

!!!请注意，此解决方案将您的模板公开给公众访问。（mysite.com/index.html将返回您的模板）顺便说一句，这可以轻松修补。

删除它：

app.engine('html', engines.swig);
app.set('view engine', 'html');
app.set('views', __dirname + '/public');

在静态中间件中设置索引：

app.use('',express.static('public',{
  index: '_',
}));

相反res.render使用：

app.use('/',(req,res)=>{
    return engines.swig(__dirname + '/public/index.html', {
        title: "Ciao",
        cache: true
    }).then((html)=>{
        return res.send(html);
    }).catch((err) => {
        throw err
    })
})

您需要安装npm i --save consolidate

基本上你使用index.html作为模板和swig函数混合swig模板+数据并返回html。

如果这个解决方案对性能有影响，我会进一步调查，但不应该！

Webpack建立的index.html来自快递

0 个答案: