介绍

我最近遇到了一个情况，我必须从nodejs服务器上的expressjs供电的API提供静态HTML页面。

这是一个简单但有趣的问题，我考虑过在一个地方为我的未来自我或其他人寻找解决方案和直接向前解释的其他人。

教程项目设置

从this github repo下载或克隆教程文件。

该项目包括基本的nodejs和expressjs设置。有一个server.js文件，该文件具有可以初始化服务器的代码。有一个/public文件夹，其中包含我们的静态HTML，CSS，JS和媒体文件。

运行npm i以安装依赖项，然后将npm start启动。

该项目还将安装nodemon，每当您对项目中的文件进行任何更改时，它将自动重新启动服务器。

服务HTML页面

如果您现在在浏览器中访问http://localhost:3000/，则不会看到任何东西，因为API根端点没有返回任何响应。

我们想要的是，此URL应该为我们的静态HTML服务：/public/index.html。

在您的编辑器中打开server.js，然后用此替换root api服务处理程序的定义。

app.get( "/", ( req, res ) => {
  // send the HTML file in the API response
  res.sendFile( path.join( __dirname + "/public/index.html" ));
});

sendFile()方法，顾名思义将发送HTML文件作为响应。 Content-Type将自动设置为text/html。

如果您访问http://localhost:3000/，则应该能够查看HTML页面。

但是我们的CSS，JS和媒体文件未正确提供。如果您在开发工具中查看控制台，您会看到这样的错误：

这些问题的原因是ExpressJS并未意识到/public目录中这些静态资产的存在。为了使其意识到，我们需要使用express.static()返回的中间件。

将整个代码粘贴到您的server.js文件中。

const express = require( "express" ),
  app = express(),
  path = require( "path" ),
  PORT = 3000;

// register the location of the static assets
app.use( express.static( 'public' ));

app.get( "/", ( req, res ) => {
  // send the HTML file in the API response
  res.sendFile( path.join( __dirname + "/public/index.html" ));
});

// Start the API server!
app.listen( PORT, () => console.log( `👂 API server listening on port ${ PORT }` ) );

express.static()将包含静态文件作为输入参数的文件夹的位置。

如果您重新加载页面，现在应该可以查看适当的页面，并拥有所有静态资产的位置。