logo标签列表

如何在Express中使用HTML作为视图引擎？

htmlnode.jsexpress
150
我尝试了这个简单的更改，从种子中创建了相应的.html文件（例如index.html）。
//app.set('view engine', 'jade');
app.set('view engine', 'html');

而这个文件保持不变：

exports.index = function(req, res){
  res.render('index');
};

但是在运行时我遇到了

500错误: 找不到模块“html”

那么我的唯一选择是使用“ejs”吗？我的意图是将纯HTML与AngularJS结合使用。

7
请参考以下主题获取答案： https://dev59.com/m2855IYBdhLWcg3wHwaH希望这能有所帮助。 - roland
3
app.engine('html', require('ejs').renderFile); - Dinesh Kanivu
16个回答
107

在另一个链接中的答案可以起作用，但是如果要提供HTML，根本不需要使用视图引擎，除非您想设置新奇的路由。相反，只需使用静态中间件即可：

app.use(express.static(__dirname + '/public'));
4
我注释掉了app.set('view engine', html)的引用。此后，我遇到了一个错误信息：“未指定默认引擎并且没有提供扩展名”，这是预料中的。但当我将res.render("index")更改为res.render("index.html")时，出现了以下错误：TypeError: 对象#<View>的属性'engine'不是函数。 - Julio
4
没有了视图引擎，所以我认为 res.render() 不再起作用。相反，把你的原始 HTML 文件放在 public 目录下，让静态中间件直接处理文件的提供服务。如果您需要更复杂的路由，可以自己设置 HTML 视图引擎。 - Nick McCurdy
6
在 app.get() 调用中，您需要编写什么内容？ - ajbraus
5
@ajbraus，其实你根本不需要使用app.get()方法。它只会直接提供/public文件夹中的HTML文件。因此，在浏览器中，您只需直接指向HTML文件即可，这样就完成了......基本上没有路由。 - dm76
我遇到的问题是，如果在页面加载后刷新页面，它会显示错误消息：“未指定默认引擎且未提供扩展名的错误”。如果您使用Auth， {provide: LocationStrategy, useClass: HashLocationStrategy} ]，它会向URL添加一个哈希，这对其他原因来说很麻烦。有没有什么解决办法？ - wuno
@ajbraus - 您可以使用res.sendFile来提供HTML文件，例如 app.get('/', (req, res) => res.sendFile("index.html"));。 - rovyko
41

为了让渲染引擎接受html而不是jade，您可以按照以下步骤进行：

  1. 将consolidate和swig安装到您的目录中。

 npm install consolidate
 npm install swig

  • 将以下代码添加到您的app.js文件中

    • var cons = require('consolidate');

// view engine setup
app.engine('html', cons.swig)
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'html');

  • 将您的视图模板作为“.html”文件添加到“views”文件夹中。重新启动您的节点服务器并在浏览器中启动应用程序。

    • 虽然这样呈现HTML没有任何问题，但我建议您通过学习使用JADE。Jade是一个很棒的模板引擎，学习它将有助于您实现更好的设计和可扩展性。

    没有方法'engine' - 所有步骤完成后 - Mani
    你使用的是哪个版本的Express？Express 4.x 包含 app.engine API。更多信息请参考 http://expressjs.com/en/api.html#app.engine。 - AnandShanbhag
    非常好！我喜欢一年前的答案第一次就起作用了。 - Matthew Snell
    为什么它仍然无法渲染我的CSS和其他内容？ - frustrated-dev
    34
    在您的 apps.js 文件中添加以下内容。
    // view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

    现在您可以使用ejs视图引擎，同时将视图文件保留为.html格式。
    来源：http://www.makebetterthings.com/node-js/how-to-use-html-with-express-node-js/ 您需要安装这两个软件包：
    npm install ejs --save
npm install path --save

    然后导入所需的包：

    var path = require('path');


    这样您就可以将您的视图保存为 .html 而不是 .ejs。
    在使用支持 html 但不识别 ejs 的 IDE 时非常有用。

    2
    应用程序设置('views'，path.join(__dirname，'/path/to/your/folder')); 应用程序设置("view options"，{layout: false}); 应用程序引擎('html'，function(path，opt，fn) { fs.readFile(path，'utf-8'，function(error，str) { if (error) return str; return fn(null，str); });}); - nilakantha singh deo
    22

    如果您想在简单的纯HTML文件中使用Angular，则不需要视图引擎。以下是如何操作：
    在您的route.js文件中：

    router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});
    2
    绝对是最简单的解决方案。我没有安装/配置视图引擎，而是直接发送HTML。 - Newclique
    18

    尝试将此配置用于您的服务器

    app.configure(function() {
    app.use(express.static(__dirname + '/public'));         // set the static files location
    app.use(express.logger('dev'));                         // log every request to the console
    app.use(express.bodyParser());                          // pull information from html in POST
    app.use(express.methodOverride());                      // simulate DELETE and PUT
    app.use(express.favicon(__dirname + '/public/img/favicon.ico'));
});

    那么你的路由回调函数将如下所示：

    function(req, res) {
    res.sendfile('./public/index.html');
};
    10

    我建议使用 https://www.npmjs.com/package/express-es6-template-engine——这是一个非常轻量级且极快的模板引擎。虽然名称有点误导，但它也可以在没有 expressjs 的情况下使用。

    将 express-es6-template-engine 集成到您的应用程序中所需的基本知识非常简单，易于实现：

    const express = require('express'),
  es6Renderer = require('express-es6-template-engine'),
  app = express();
  
app.engine('html', es6Renderer);
app.set('views', 'views');
app.set('view engine', 'html');
 
app.get('/', function(req, res) {
  res.render('index', {locals: {title: 'Welcome!'}});
});
 
app.listen(3000);

    Here is the content of the index.html file locate inside your 'views' directory: 

    <!DOCTYPE html>
<html>
<body>
    <h1>${title}</h1>
</body>
</html>
    1
    这几乎让我实现了React页面的服务器端渲染，所有内容都是单页HTML/CSS/JS/React。我没有意识到我现在实际上可以在我的React渲染中只使用<div>${customer.name}</div>！我希望我能找到如何提取{locals: { rows: [ ]}以映射一组元素的方法。有什么线索吗？ - Neil Gaetano Lindberg
    6

    将HTML中间件注释掉，即：

    //app.set('view engine', 'html');

    请使用：

    app.get("/",(req,res)=>{
    res.sendFile("index.html");
});
    4
    答案很简单。 您必须使用app.engine('html')来渲染*.html页面。 尝试这个。它一定会解决问题。
    app.set('views', path.join(__dirname, 'views'));
**// Set EJS View Engine**
app.set('view engine','ejs');
**// Set HTML engine**
app.engine('html', require('ejs').renderFile);

    .html文件将起作用

    2
    答案不完整。这些更改在哪里进行？假设是在app.js中，但您的答案需要具体说明。此外，这可能不是所有需要更改的内容，因为仅进行这三个更改/添加的结果是“找不到模块' ejs'”。您的答案可能接近，但我认为您需要再添加一些信息。 - Newclique
    另外，渲染不同于提供文件。渲染需要服务器预处理文件，并添加传入渲染方法的任何动态内容。也许这就是OP想要的，但有些人将渲染与提供混淆了。这是非常不同的概念。 - Newclique
    @wade 这是用于呈现 HTML 文件而不是 EJS 文件的。 - Dinesh Kanivu
    4

    Html文件无需渲染。
    渲染引擎所做的是将非Html文件转换为Html文件。
    要发送一个Html文件，只需执行以下操作：

    res.sendFile("index.html");

    您可能需要使用__dirname + "/index.html"，这样Express就会知道确切的路径。

    3

    可以使用ejs引擎来渲染HTML文件：

    app.set('view engine', 'ejs');

    请确保您的文件位于“/views”目录下，并以“.ejs”命名。

    例如，“index.ejs”。

    它可以工作，但感觉有些hacky。你知道使用 .ejs 替代 .html 会有什么注意事项吗？无论如何感谢您提供可能是最快的解决方法！ - mikeym
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接