带有 node.js 和 express 的基本网络服务器，用于提供 html 文件和资产

Question

我正在做一些前端实验，我想要一个非常基本的网络服务器来快速启动一个项目并提供文件（一个 index.html 文件 + 一些 css/js/img 文件）。 所以我试图用 node.js 和 express 做一些东西，我已经玩过这两个，但这次我不想使用渲染引擎，因为我只有一个静态文件，我得到了这个代码html 文件而不是资产（错误 404）：

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

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

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

app.listen(3000);

有没有一种简单的方法来做到这一点（如果可能，在一个文件中）或者 Express 需要使用视图和渲染引擎？

Answer 1

我遇到了这个，因为我有类似的情况。 我不需要也不喜欢模板。 您放在 express 下的 public/ 目录中的任何内容都将作为静态内容（就像 Apache）。 所以我把我的 index.html 放在那里并使用 sendfile 来处理没有文件的请求（例如：GET http://mysite/ ）：

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

Answer 2

以下代码对我有用。

var express = require('express'),
  app = express(),
  http = require('http'),
  httpServer = http.Server(app);

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

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

这会加载带有资产的页面

Answer 3

你可以用 node.js 中这样的解决方案 （链接不再有效） ，正如我之前写过的那样。

总结一下，用npm install connect 。

然后将此代码粘贴到与 HTML/CSS/JS 文件位于同一文件夹中的名为server.js的文件中。

var util = require('util'),
    connect = require('connect'),
    port = 1337;

connect.createServer(connect.static(__dirname)).listen(port);
util.puts('Listening on ' + port + '...');
util.puts('Press Ctrl + C to stop.');

现在导航到终端中的该文件夹并运行node server.js ，这将为您提供一个位于http://localhost:1337的临时 Web 服务器

Answer 4

感谢原始海报，但他们的答案现在有点过时了。 做起来非常非常简单。 基本设置如下所示：

const express = require("express");
const app = express();
const dir = `${__dirname}/public/`;

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

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

// Serve a 404 page on all other accessed routes, or redirect to specific page
app.get("*", (req, res) => {
  //   res.sendFile(dir + "404.html");
  //   res.redirect("/");
});

app.listen(3000);

上面的例子是如果你想提供单个 HTML 文件。 如果您正在提供单页 JS 应用程序，这将起作用。

const express = require("express");
const app = express();
const dir = `${__dirname}/public/`;

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

app.listen(3000);

如果您需要从文件夹中提供其他静态资产，您可以在开始定义路由之前添加如下内容：

app.use(express.static('public'))

假设您在 public 中有一个js文件夹，例如： public/js 。 您可以使用相对路径将这些文件中的任何一个包含在 html 文件中。 例如，假设/contact需要一个contact.js文件。 在您的contact.html文件中，您可以简单地包含脚本：

<script src="./js/contact.js"></script>

基于该示例，您可以对 css、图像等执行相同的操作。

<img src="./images/rofl-waffle.png" />
<link rel="stylesheet" href="./css/o-rly-owl.css" />

希望这对未来的每个人都有帮助。