如何配置 Firebase 托管以使用 pug 而不是 html 文件？

Question

我想将我的 webapp 托管到 firebase 托管，但似乎 firebase 不适用于 pug 模板，因为它 return 我的 404 页面找不到我的 "index.pug"。

提前致谢。

Answer 1

Firebase Hosting 不会为您编译任何类型的框架或模板。它只提供静态内容。如果你想使用哈巴狗模板，你必须编译它，然后将静态资产移动到 Firebase Hosting public 目录。

Answer 2

测试截至 2020-05-16。 express + pug 适用于 firebase 托管。

一些注意事项：

使用浏览器的私有 window 进行测试；
部署后，哈巴狗页面可能需要几秒钟才能可用。我来自香港，我正在将功能部署到默认位置 us-central，但不确定这是否相关；
您提交给 "res.render" 的视图，例如，确保它是 index 而不是 /index ;

试试这些：

[project folder root]/functions/index.js

const functions = require('firebase-functions');
const path = require("path");
const express = require("express");
const app = express();

//###############################################################
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

//###############################################################
app.get("/index", function(req, res, next){
  res.render("index", {title:"title lo, rendered from index.js"});
});

app.get("/page/:page_num", function(req, res, next){
  const page_num = req.params.page_num;
  res.render("page", {title:"page here", page_num: page_num});
});

// export to firebase functions
exports.app = functions.https.onRequest(app);

[project folder root]/functions/views/index.pug

h1 okok hello from pug
p this is a line
p another line here
p here is the title : #{title}

[project folder root]/functions/views/page.pug

h1 page 
p this is page title : #{title}
p this is page number : #{page_num}

Answer 3

为此，您应该使用云函数。您可以使用 handlebars 或 pug。这是一个使用 handlebars.

的例子

https://github.com/firebase/functions-samples/tree/master/template-handlebars

我没用过pug，不过应该和handlebars一样。您应该在函数文件夹中划分动态文件（pug files 在视图下），您的 CSS 和 JS 应该在 public 文件夹中。 public 仅提供静态内容。

这里有一个非常好的视频，可以获取分步指南（您也可以了解 CDN 和 caching content）https://www.youtube.com/watch?v=LOeioOKUKI8

如何配置 Firebase 托管以使用 pug 而不是 html 文件？

How to configure Firebase hosting to use pug instead of html file?

node.js

firebase

firebase-hosting

pug