blocks|key|269305|text|在另一个链接上的答案是有效的，但是为了服务于HTML，根本不需要使用视图引擎，除非你想设置时髦的路由。相反，只需使用静态中间件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|269306|app.use(express.static(__dirname+%2B+'/public'));|code-block|syntax|javascript|269307|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The answers at the other link will work, but to serve out HTML, there is no need to use a view engine at all, unless you want to set up funky routing. Instead, just use the static middleware:

<pre><code>app.use(express.static(__dirname + '/public'));
</code></pre>

blocks|key|52883|text|在您的服务器配置中尝试此选项|type|unstyled|depth|inlineStyleRanges|entityRanges|data|52884|app.configure(function()+{
++++app.use(express.static(__dirname+%2B+'/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+%2B+'/public/img/favicon.ico'));
});|code-block|syntax|javascript|52885|然后，路由的回调函数将如下所示：|52886|function(req,+res)+{
++++res.sendfile('./public/index.html');
};|52887|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

try this for your server config

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

then your callback functions to routes will look like:

<pre><code>function(req, res) {
 res.sendfile('./public/index.html');
};
</code></pre>

blocks|key|53012|text|没有视图引擎是必要的，如果你想使用angular与简单的纯html文件。下面是如何做的:在你的route.js文件中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|53013|router.get('/',+(req,+res)+=>+{
+++res.sendFile('index.html',+{
+++++root:+'yourPathToIndexDirectory'
+++});
});|code-block|syntax|javascript|53014|entityMap^0|1B|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

No view engine is necessary, if you want to use angular with simple plain html file. Here's how to do it:
In your <code>route.js</code> file:

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

blocks|key|53099|text|我推荐使用https://www.npmjs.com/package/express-es6-template-engine+--非常轻快的模板引擎。这个名字有点误导，因为它也可以在没有expressjs的情况下工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|53100|将express-es6-template-engine集成到您的应用程序中所需的基础知识非常简单，实现起来也相当直接：|style|CODE|53101|​|53102|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);|code-block|syntax|javascript|53103|下面是位于“views”目录中的index.html文件的内容：|53104|53105|<!DOCTYPE+html>
<html>
<body>
++++<h1>${title}</h1>
</body>
</html>|53106|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/express-es6-template-engine^0|5|1L|0|0|1|R|0|0|0|G|A|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@$A|16|B|17|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|18|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|19|8|@]|9|@]|C|$M|N]]|$1|O|3|P|5|6|7|1A|8|@$A|1B|B|1C|F|G]]|9|@]|C|$]]|$1|Q|3|I|5|6|7|1D|8|@]|9|@]|C|$]]|$1|R|3|S|5|L|7|1E|8|@]|9|@]|C|$M|N]]|$1|T|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]]]

I recommend using <a href="https://www.npmjs.com/package/express-es6-template-engine" rel="noreferrer">https://www.npmjs.com/package/express-es6-template-engine</a> - extremely lightwave and blazingly fast template engine. The name is a bit misleading as it can work without expressjs too.

The basics required to integrate <code>express-es6-template-engine</code> in your app are pretty simple and quite straight forward to implement: 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
</div>
</div>

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


<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body&gt;
 &lt;h1&gt;${title}&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|269631|text|注释掉html的中间件，即|type|unstyled|depth|inlineStyleRanges|entityRanges|data|269632|//app.set('view+engine',+'html');|code-block|syntax|javascript|269633|请改用：|269634|app.get("/",(req,res)=>{
++++res.sendFile("index.html");
});|269635|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Comment out the middleware for html i.e.

<pre><code>//app.set('view engine', 'html');
</code></pre>

Instead use:

<pre><code>app.get("/",(req,res)=&gt;{
 res.sendFile("index.html");
});
</code></pre>

blocks|key|269542|text|答案很简单。必须使用app.engine('html')呈现*.html页。尝试this.It必须解决这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|269543|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);|code-block|syntax|javascript|269544|.html文件将正常工作|269545|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Answer is very Simple.
You Must use app.engine('html') to render *.html Pages.
try this.It must Solve the Problem.

<pre><code>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);
</code></pre>

the .html file Will work

blocks|key|269696|text|不需要呈现Html文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|269697|渲染引擎所做的是将不是Html文件的文件转换为Html文件。|269698|要发送Html文件，只需执行以下操作：|269699|res.sendFile("index.html");|code-block|syntax|javascript|269700|您可能需要使用__dirname%2B"/index.html"，这样express才能知道确切的路径。|offset|length|style|CODE|269701|entityMap^0|0|0|0|0|7|N|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Html files do not need to be rendered. 
what a render engine does is turn a file that is not an Html file into an Html file. 
to send an Html file, just do:
<pre class="lang-js prettyprint-override"><code>res.sendFile(&quot;index.html&quot;);
</code></pre>
you might need to use <code>__dirname+&quot;/index.html&quot;</code> so express will know the exact path.

blocks|key|52951|text|HTML文件可以使用ejs引擎呈现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|52952|app.set('view+engine',+'ejs');|code-block|syntax|javascript|52953|并确保使用".ejs“命名"/views”下的文件。|52954|例如"index.ejs“。|52955|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

HTML files can be rendered using ejs engine:

<pre><code>app.set('view engine', 'ejs');
</code></pre>

And make sure your files under "/views" are named with ".ejs".

For example "index.ejs".

blocks|key|269605|text|html不是视图引擎，但ejs提供了在其中编写html代码的可能性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|269606|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

html is not a view engine , but ejs offers the possibility to write html code within it

blocks|key|53164|text|安装ejs模板|type|unstyled|depth|inlineStyleRanges|entityRanges|data|53165|npm+install+ejs+--save|offset|length|style|CODE|53166|在app.js中引用ejs|53167|app.set('views',+path.join(__dirname,+'views'));`
app.set('view+engine',+'ejs');|code-block|syntax|javascript|53168|在views/indes.ejs等视图中创建一个ejs模板，并在路由器中使用ejs+tempalte|53169|router.get('/',+function(req,+res,+next)+{
++++res.render('index',+{+title:+'Express'+});
});|53170|entityMap^0|0|0|M|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Install ejs template

<code>npm install ejs --save</code>

Refer ejs in app.js

<pre><code>app.set('views', path.join(__dirname, 'views'));`
app.set('view engine', 'ejs');
</code></pre>

Create a ejs template in views like views/indes.ejs &amp; use ejs tempalte in router

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

blocks|key|269391|text|为了通过路由为html页面提供服务，我已经这样做了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|269392|var+hbs+=+require('express-hbs');
app.engine('hbs',+hbs.express4({
++partialsDir:+__dirname+%2B+'/views/partials'
}));
app.set('views',+__dirname+%2B+'/views');
app.set('view+engine',+'hbs');|code-block|syntax|javascript|269393|并将我的.html文件重命名为.hbs文件--+handlebars支持普通的html|269394|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

to server html pages through routing, I have done this.

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

and renamed my .html files to .hbs files - handlebars support plain html

blocks|key|53044|text|要使渲染引擎接受html而不是jade，您可以执行以下步骤；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|53045|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.|code-block|syntax|javascript|53046|这应该是可行的|53047|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

To make the render engine accept html instead of jade you can follow the following steps;

<pre><code>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.
</code></pre>

This should work

blocks|key|269559|text|尝试这个简单的解决方案，它对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|269560|app.get('/',+function(req,+res){
++++res.render('index.html')
++});|code-block|syntax|javascript|269561|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try out this simple solution, it worked for me

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

blocks|key|269672|text|在swig的帮助下渲染html模板。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|269673|//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');|code-block|syntax|javascript|269674|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Render html template with the help of swig. 

<pre><code>//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');
</code></pre>

I tried this simple change from the seed and created the corresponding .html files (e.g. index.html).

<pre><code>//app.set('view engine', 'jade');
app.set('view engine', 'html');
</code></pre>

and this file remained the same:

<pre><code>exports.index = function(req, res){
 res.render('index');
};
</code></pre>

but while running I get

500 Error: Cannot find module 'html'

Is my only option to use 'ejs'? My intent was to use plain HTML in conjuction with AngularJS.

How do I use HTML as the view engine in Express?

中间件

服务器

路由器

路由

我尝试了从种子开始的这一简单更改，并创建了相应的.html文件(例如index.html)。//app.set('view engine', 'jade');app.set('view engine', 'html');这个文件保持不变：exports.index = function(req, res){  res.render('index');};但是在跑步的时候我得到了500错误:找不到模

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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