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

130

我尝试从种子开始进行此简单更改，并创建了相应的.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结合使用。

html node.js express

— 朱利奥
source

7

请参阅本主题以获取答案： stackoverflow.com/questions/4529586/… 希望这会

— 有所

3

app.engine（'html'，require（'ejs'）。renderFile）;

— Dinesh Kanivu

91

另一个链接上的答案会起作用，但是要提供HTML，完全不需要使用视图引擎，除非您要设置时髦的路由。相反，只需使用静态中间件即可：

app.use(express.static(__dirname + '/public'));

— 丹·科恩
source

3

我继续并注释掉了对app.set（'view engine'，html）的引用。然后，我得到一条错误消息，“未指定默认引擎且未提供扩展名”。但是，当我将res.render（“ index”）更改为res.render（“ index.html”）时，出现以下错误：TypeError：对象＃<View>的属性'engine'不是函数。

— Julio

4

没有更多的视图引擎，因此我认为res.render()不会再有用了。而是将原始HTML文件放入其中，public并让静态中间件直接处理文件。如果您需要比这更高级的路由，则可以设置自己的HTML视图引擎。

— Nick McCurdy 2014年

6

那么，您在app.get（）调用中写了什么？

— ajbraus

5

@ajbraus，您甚至根本不需要app.get（）调用。这将直接为/ public文件夹中的HTML文件提供服务。因此，在浏览器中，您只需直接指向html就可以了……基本上没有路由

— dm76 '16

我一直遇到的问题是，如果在加载页面后刷新页面，它会显示错误消息：错误：未指定默认引擎且未提供扩展名。那么如果您使用Auth {{provide：LocationStrategy，useClass：HashLocationStrategy}]身份验证，则会在您的网址上添加一个哈希值，这会由于其他原因而使您感到痛苦。有没有解决的办法？

— wuno

33

要使渲染引擎接受html而不是jade，可以按照以下步骤操作：

安装巩固和痛饮到您的目录。

 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');

在“ views”文件夹中将视图模板添加为.html。重新启动节点服务器，然后在浏览器中启动该应用程序。

尽管这样可以毫无问题地呈现html，但我还是建议您通过学习使用JADE。Jade是一个了不起的模板引擎，学习它可以帮助您实现更好的设计和可伸缩性。

— 阿南德·尚巴格
source

没有方法“引擎”-在所有步骤之后

— ImranNaqvi

您正在使用哪个版本的Express？Express 4.x包含app.engine API。更多信息是@ expressjs.com/en/api.html#app.engine

— AnandShanbhag

很棒！我喜欢一岁的答案第一次起作用的时候。

— 马修·斯内尔

为什么它仍然不能使我的CSS等

— exe文件

23

在您的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时非常有用。

— Sudhanshu Gupta
source

1

app.set（'views'，path.join（__ dirname，'/ path / to / your / folder'））; app.set（“ view options”，{layout：false}）; app.engine（'html'，function（path，opt，fn）{fs.readFile（path，'utf-8'，function（error，str）{if（error）return str; return fn（null，str） ;}）;}）;

— nilakantha singh deo

16

试试这个为您的服务器配置

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');
};

— 康纳·里奇
source

14

如果要对简单的纯HTML文件使用angular，则不需要视图引擎。方法如下：在您的route.js文件中：

router.get('/', (req, res) => {
   res.sendFile('index.html', {
     root: 'yourPathToIndexDirectory'
   });
});

— 阿什什·拉瓦特（Ashish Rawat）
source

1

绝对是最简单的解决方案。我没有安装/配置视图引擎，并且发送了html。

— Newclique

7

我建议使用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);

展开摘要

这是位于index.html“ views”目录中的文件内容：

<!DOCTYPE html>
<html>
<body>
    <h1>${title}</h1>
</body>
</html>

— 迪丁科
source

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文件将起作用

— 迪内什·卡尼武（Dinesh Kanivu）
source

2

答案不完整。这些更改在哪里进行？假设使用app.js，但您的答案需要具体。另外，这可能并不需要全部更改，因为仅进行这三个更改/添加的结果就是“无法找到模块'ejs'”。您的答案可能接近，但是您需要添加更多信息恕我直言。

— Newclique

同样，渲染与提供文件不同。渲染要求服务器预处理文件，并添加传递到render方法中的任何动态内容。也许这就是OP想要的，但是有些人将渲染与服务结合在一起。非常不同的概念。

— Newclique

@wade用于呈现html文件而不是ejs文件。

— Dinesh Kanivu

3

可以使用ejs引擎呈现HTML文件：

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

并确保在“ / views”下的文件以“ .ejs”命名。

例如“ index.ejs”。

— 张杰
source

它可以工作，但感觉有点笨拙。您知道使用.ejs代替.html是否有任何警告？欢呼声最快的修复建议都一样！

— mikeym '17

3

注释掉html的中间件

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

而是使用：

app.get("/",(req,res)=>{
    res.sendFile("index.html");
});

— 湿婆Chhetri
source

2

html不是视图引擎，但是ejs提供了在其中编写html代码的可能性

— 威尔·乔凡
source

1

通过路由到服务器html页面，我已经做到了。

var hbs = require('express-hbs');
app.engine('hbs', hbs.express4({
  partialsDir: __dirname + '/views/partials'
}));
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');

并将我的.html文件重命名为.hbs文件-手把支持纯HTML

— 阿维纳什
source

1

要使渲染引擎接受html而不是jade，可以按照以下步骤操作：

Install consolidate and swig to your directory.

 npm install consolidate
 npm install swig

add following lines to your app.js file

var cons = require('consolidate');

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

add your view templates as .html inside “views” folder. Restart you node server and start the app in the browser.

这应该工作

— Med Mehadi Hasan Mozumder医师
source

1

试试这个简单的解决方案，它对我有用

app.get('/', function(req, res){
    res.render('index.html')
  });

— 基里亚姆沃博·耶努苏
source

1

您应该添加所有行，但此行本身不起作用。

— MushyPeas

1

安装ejs模板

npm install ejs --save

在app.js中引用ejs

app.set('views', path.join(__dirname, 'views'));`
app.set('view engine', 'ejs');

在诸如views / indes.ejs之类的视图中创建ejs模板，并在路由器中使用ejs tempalte

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

— ta
source

0

在swig的帮助下渲染html模板。

//require module swig    
    var swig = require('swig');

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

— 哈伦德拉·辛格（Harendra Singh）
source

0

HTML文件不需要呈现。
渲染引擎所做的就是将非HTML文件的文件转换为HTML文件。
要发送HTML文件，只需执行以下操作：

res.sendFile("index.html");

您可能需要使用，__dirname+"/index.html"所以express将知道确切的路径。

— 吉迪恩·马克斯
source