Question

我有一个基本的node.js应用程序，我试图使用Express框架开始。我有一个views文件夹，其中有一个index.html文件。但是在加载Web浏览器时收到以下错误。

错误：找不到模块'html'

以下是我的代码。

var express = require('express');
var app = express.createServer();

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

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

app.listen(8080, '127.0.0.1')

我在这里缺少什么？

Answer 1

你可以让jade包含一个纯HTML页面：

在views / index.jade中

include plain.html

in views / plain.html

<!DOCTYPE html>
...

和app.js仍然只能渲染玉：

res.render(index)

Answer 2

其中许多答案都已过时。

使用express 3.0.0和3.1.0，以下工作：

app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);

请参阅下面的评论，了解快速3.4 +的替代语法和注意事项：

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

然后你可以做类似的事情：

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

这假设您在views子文件夹中拥有自己的视图，并且已安装ejs节点模块。如果没有，请在节点控制台上运行以下命令：

npm install ejs --save

Answer 3

来自Express.js指南：View Rendering

查看文件名采用Express.ENGINE形式，其中ENGINE是所需模块的名称。 例如，视图layout.ejs会告诉视图系统require('ejs') ，正在加载的模块必须导出方法exports.render(str, options) 以符合要求使用Express，但app.register()可用于将引擎映射到文件扩展名，以便例如foo.html可以由jade呈现。

因此，您要么创建自己的简单渲染器，要么只使用jade：

 app.register('.html', require('jade'));

More关于app.register。

请注意，在Express 3中，此方法已重命名为app.engine

Answer 4

试试这个。它对我有用。

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

  // make a custom html template
  app.register('.html', {
    compile: function(str, options){
      return function(locals){
        return str;
      };
    }
  });
});

....

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

Answer 5

您还可以阅读HTML文件并发送：

app.get('/', (req, res) => {
    fs.readFile(__dirname + '/public/index.html', 'utf8', (err, text) => {
        res.send(text);
    });
});

Answer 6

app.get('/', function (req, res) {
res.sendfile(__dirname + '/public/index.html');
});

Answer 7

如果您使用 express@~3.0.0 ，请更改以下示例中的行：

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

这样的事情：

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

我按照express api page所描述的那样制作它，就像魅力一样。使用该设置，您无需编写其他代码，因此可以轻松地用于微型生产或测试。

下面列出的完整代码：

var express = require('express');
var app = express.createServer();

app.set("view options", {layout: false});
app.use(express.static(__dirname + '/public'));

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

app.listen(8080, '127.0.0.1')

Answer 8

我在express 3.X和node 0.6.16中也遇到了同样的问题。上述解决方案不适用于最新版本express 3.x。他们删除了app.register方法并添加了app.engine方法。如果您尝试了上述解决方案，则可能会出现以下错误。

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
TypeError: Object function app(req, res){ app.handle(req, res); } has no method 'register'
    at Function.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:37:5)
    at Function.configure (/home/user1/ArunKumar/firstExpress/node_modules/express/lib/application.js:399:61)
    at Object.<anonymous> (/home/user1/ArunKumar/firstExpress/app.js:22:5)
    at Module._compile (module.js:441:26)
    at Object..js (module.js:459:10)
    at Module.load (module.js:348:31)
    at Function._load (module.js:308:12)
    at Array.0 (module.js:479:10)
    at EventEmitter._tickCallback (node.js:192:40)

删除错误消息。将以下行添加到app.configure function

app.engine('html', require('ejs').renderFile);

注意：您必须安装ejs模板引擎

npm install -g ejs

示例：

app.configure(function(){

  .....

  // disable layout
  app.set("view options", {layout: false});

  app.engine('html', require('ejs').renderFile);

....

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

注意：最简单的解决方案是使用ejs模板作为视图引擎。在那里，您可以在* .ejs视图文件中编写原始HTML。

Answer 9

如果您不必使用视图目录，只需将html文件移至下面的公开目录。

然后，将此行添加到app.configure而不是'/ views'。

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

Answer 10

文件夹结构：

.
├── index.html
├── node_modules
│   ├──{...}
└── server.js

<强> server.js

var express = require('express');
var app = express();

app.use(express.static('./'));

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

app.listen(8882, '127.0.0.1')

<强>的index.html

<!DOCTYPE html>
<html>
<body>

<div> hello world </div>

</body>
</html>

输出

你好世界

Answer 11

要在节点中呈现Html页面，请尝试以下操作

app.set('views', __dirname + '/views');

app.engine('html', require('ejs').renderFile);

您需要通过ejs安装npm模块，如：
```
   npm install ejs --save
```

Answer 12

对于我的项目，我创建了这个结构：

index.js
css/
    reset.css
html/
    index.html

此代码为/请求提供index.html，为/css/reset.css请求提供reset.css。很简单，最好的部分是它会自动添加缓存标题。

var express = require('express'),
    server = express();

server.configure(function () {
    server.use('/css', express.static(__dirname + '/css'));
    server.use(express.static(__dirname + '/html'));
});

server.listen(1337);

Answer 13

我添加了2行以下，它适用于我

    app.set('view engine', 'html');
    app.engine('html', require('ejs').renderFile);

Answer 14

我不想依赖ejs来简单地传递HTML文件，所以我只是自己编写了一个小型渲染器：

const Promise = require( "bluebird" );
const fs      = Promise.promisifyAll( require( "fs" ) );

app.set( "view engine", "html" );
app.engine( ".html", ( filename, request, done ) => {
    fs.readFileAsync( filename, "utf-8" )
        .then( html => done( null, html ) )
        .catch( done );
} );

Answer 15

在Express路线中尝试res.sendFile（）函数。

var express = require("express");
var app     = express();
var path    = require("path");


app.get('/',function(req,res){
  res.sendFile(path.join(__dirname+'/index.html'));
  //__dirname : It will resolve to your project folder.
});

app.get('/about',function(req,res){
  res.sendFile(path.join(__dirname+'/about.html'));
});

app.get('/sitemap',function(req,res){
  res.sendFile(path.join(__dirname+'/sitemap.html'));
});

app.listen(3000);

console.log("Running at Port 3000");

请在此处阅读：http://codeforgeek.com/2015/01/render-html-file-expressjs/

Answer 16

使用Express 4.0.0，您唯一要做的就是在app.js中注释掉2行：

/* app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); */ //or whatever the templating engine is.

然后将静态文件放入/ public目录。示例：/public/index.html

Answer 17

以下是快递服务器的完整文件演示！

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

希望它对您有所帮助！

// simple express server for HTML pages!
// ES6 style

const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();

let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[0] );
});

app.get('/test', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[1] );
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/ 
        Server hostname ${hostname} is listening on port ${port}!
    `);
});

Answer 18

Express 4.x

res.sendFile(path [, options] [, fn])

发送.html文件，没有模板引擎...

//...
// Node modules
const path = require('path')
//...
// Set path to views directory
app.set('views', path.join(__dirname, 'views'))
/**
 * App routes
 */
app.get('/', (req, res) => {
  res.sendFile('index.html', { root: app.get('views') })
})
//...

.
├── node_modules
│
├── views
│   ├──index.html
└── app.js

Answer 19

1）最好的方法是设置静态文件夹。在您的主文件（app.js | server.js | ???）中：

app.use(express.static(path.join(__dirname, 'public')));

公共/ CSS / form.html
公共/ CSS / style.css中

然后你从“public”文件夹获得静态文件：

http://YOUR_DOMAIN/form.html
http://YOUR_DOMAIN/css/style.css

2）

您可以创建文件缓存使用方法fs.readFileSync

var cache = {};
cache["index.html"] = fs.readFileSync( __dirname + '/public/form.html');

app.get('/', function(req, res){    
    res.setHeader('Content-Type', 'text/html');
    res.send( cache["index.html"] );                                
};);

Answer 20

res.sendFile(__dirname + '/public/login.html');

Answer 21

我正在尝试使用快速RESTful API设置角度应用，并多次登陆此页面，尽管它没有帮助。以下是我发现的有效方法：

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

然后在api路线的回调中看起来像：res.jsonp(users);

您的客户端框架可以处理路由。 Express用于提供API。

我的家乡路线如下：

app.get('/*', function(req, res) {
    res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
});

Answer 22

将以下行添加到您的代码中

替换＆＃34; jade＆＃34;用＆＃34; ejs＆＃34; ＆安培; ＆＃34; X.Y.Z＆＃34;（版本）与＆＃34; *＆＃34;在package.json文件中
```
  "dependencies": {
   "ejs": "*"
  }
```
然后在你的app.js文件中添加以下代码：

app.engine('html', require('ejs').renderFile);

app.set('view engine', 'html');
并记住在视图文件夹中保留所有.HTML文件

干杯：）

Answer 23

在server.js中，请包含

<div id="flexWrapper">
    <ul id="flexContainer">
        <li class="flex-item">1</li>
        <li class="flex-item">2</li>
        <li class="flex-item">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
    </ul>
</div>

Answer 24

我想允许“/”的请求由Express路由处理，之前它们已由静态中间件处理。这将允许我呈现index.html的常规版本或加载连接+缩小的JS和CSS的版本，具体取决于应用程序设置。灵感来自Andrew Homeyer's answer，我决定将我的HTML文件 - 未经修改 - 拖到视图文件夹中，像这样配置Express

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

并创建了一个像这样的路由处理程序

 app.route('/')
        .get(function(req, res){
            if(config.useConcatendatedFiles){
                return res.render('index-dist');
            }
            res.render('index');       
        });

这很好。

Answer 25

app.get('/', function(req, res, next) {
    res.send(`<html><body><h1>My Server</h1></body></html>')
});

Answer 26

如果您要提供已包含所有内容的HTML文件，则无需“呈现”该文件，而只需“提供”。呈现是在服务器将页面发送到浏览器之前更新服务器或注入内容时进行的，它需要其他依赖项，例如ejs，如其他答案所示。

如果您只想根据浏览器的请求将其定向到文件，则应使用res.sendFile()，如下所示：

const express = require('express');
const app = express();
var port = process.env.PORT || 3000; //Whichever port you want to run on
app.use(express.static('./folder_with_html')); //This ensures local references to cs and js files work

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/folder_with_html/index.html');
});

app.listen(port, () => console.log("lifted app; listening on port " + port));

这样，您除表达外不需要其他依赖项。如果您只想让服务器发送已经创建的html文件，则上述方法是一种非常轻巧的方法。

Answer 27

对于纯html，您不需要任何npm软件包或中间件

只需使用此：

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

Answer 28

index.js

var express = require（'express'）; var app = express（）; app.use（express.static（__ dirname +'/ public'））;

let set1 = [1, 2, 3, 4, 5, 6, 7,8]
let set2 = [1, 2, 3, 4, 5]
let set3 = [1]
let set4 = [Int]()

print(set1.splitted())
print(set2.splitted())
print(set3.splitted())
print(set4.splitted())

([1, 2, 3, 4], [5, 6, 7, 8])
([1, 2, 3], [4, 5])
([1], [])
([], [])

将index.html文件放入公用文件夹

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


app.listen(3400, () => {
    console.log('Server is running at port 3400');
})

现在在终端中运行以下代码

节点index.js

Answer 29

令人遗憾的是，到2020年左右，仍然表示没有添加一种方法来渲染HTML页面而不使用sendFile对象的response方法。使用sendFile没问题，但是以path.join(__dirname, 'relative/path/to/file')的形式向其传递参数感觉不对。用户为什么要将__dirname加入文件路径？默认情况下应该完成。为什么不能通过取消项目目录来建立服务器的根目录？同样，仅安装模板依赖项以呈现静态HTML文件也不正确。我不知道解决该问题的正确方法，但是如果我必须提供静态HTML，那么我会做类似的事情：

const PORT = 8154;

const express = require('express');
const app = express();

app.use(express.static('views'));

app.listen(PORT, () => {
    console.log(`Server is listening at port http://localhost:${PORT}`);
});

以上示例假定项目结构具有一个views目录，并且其中包含静态HTML文件。例如，假设views目录中有两个名为index.html和about.html的HTML文件，然后要访问它们，我们可以访问：localhost:8153/index.html或仅访问{{1} }加载localhost:8153/页面，而index.html加载localhost:8153/about.html。通过将工件存储在about.html目录中或仅使用默认的views目录并在服务器js中对其进行配置，我们可以使用类似的方法来服务React / Angular应用程序，如下所示：

dist/<project-name>

Answer 30

如果要呈现HTML文件，则可以使用sendFile()方法，而无需使用任何模板引擎

const express =  require("express")
const path = require("path")
const app = express()
app.get("/",(req,res)=>{
    res.sendFile(**path.join(__dirname, 'htmlfiles\\index.html')**)
})
app.listen(8000,()=>{
    console.log("server is running at Port 8000");
})

我在 htmlfile 中有一个HTML文件，因此我使用了路径模块来呈现index.html路径是节点中的默认模块。如果您的文件位于刚刚使用的根文件夹中

res.sendFile(path.join(__dirname, 'htmlfiles\\index.html'))

在app.get()内部将起作用

您可以参考此视频 enter link description here

Answer 31

我通常使用这个

app.configure(function() {
    app.use(express.static(__dirname + '/web'));
});

请小心，因为它会在/ web目录中共享任何内容。

我希望它有所帮助

Answer 32

如果您使用express.abs

的快速框架

安装npm ejs

然后添加配置文件

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router)

从exports module form.js渲染页面在视图dir中有html文件扩展名为ejs的文件名为 form.html.ejs

然后创建form.js

res.render('form.html.ejs');

渲染基本的HTML视图？

32 个答案: