概念

假设您想要提供一个静态站点、单个页面应用程序或仅仅是一个静态文件(无论是在您的设备上还是在本地网络上)，那么这个serve包正是您的正确选择。

一旦到了将站点推向生产环境的时候，我们建议使用Vercel（https://vercel.com/）。

一般来说，serve还提供了一个整洁的界面来列出目录的内容：

使用

最快捷的方法是在你的项目目录中运行npx serve。

你可以使用npm来全局安装这个包(你至少需要Node.js LTS):

npm install serve -g

完成后，您可以在项目的目录中运行此命令：

serve

或者指定要提供服务的所在的文件夹：

serve folder_name

想要获取对应所有可以使用的选项内容，运行这个命令查看所有可用选项的列表：

serve --help

配置

要定制serve的行为，在工程的文件夹中创建一个serve.json文件并放入相应的配置属性，属性内容请参考https://github.com/vercel/serve-handler#options。

您可以使用以下任何选项：

public：设置要提供web服务的子目录。

cleanUrls：是否从路径中剥离了.html扩展名。

rewrites：重写路径为不同的路径。

redirects：将路径转发到不同的路径或外部url。

headers：为特定路径设置自定义头。

directoryListing：禁用目录列表或将其限制到某些路径。

unlisted：从目录列表中排除路径。

trailingSlash：删除或添加所有路径的尾斜杠。

renderSingle：如果一个目录只包含一个文件，请呈现它。

symlinks：解析符号链接，而不是呈现404错误。

etag：计算一个强ETag响应头，而不是Last-Modified。

API

service的核心是service -handler，可以作为现有HTTP服务器的中间件：

const handler = require('serve-handler');
const http = require('http');

const server = http.createServer((request, response) => {
  // You pass two more arguments for config and middleware
  // More details here: https://github.com/vercel/serve-handler#options
  return handler(request, response);
})

server.listen(3000, () => {
  console.log('Running at http://localhost:3000');
});

注意：您也可以使用micro（https://github.com/vercel/micro）替换http.createServer。

示例

创一个工程名为：serve，目录结构如下：

然后在serve 目录下命令行窗口下执行serve（前提全局安装了serve）,然后可以看到下面的执行效果：

serve
INFO: Discovered configuration in `serve.json`

   ┌───────────────────────────────────────────────────┐
   │                                                   │
   │   Serving!                                        │
   │                                                   │
   │   - Local:            http://localhost:5000       │
   │   - On Your Network:  http://192.168.137.1:5000   │
   │                                                   │
   │   Copied local address to clipboard!              │
   │                                                   │
   └───────────────────────────────────────────────────┘

然后访问http://localhost:5000，可以看到如下效果：

从页面展示内容，可以看到，可以看到项目的目录列表，现在我们禁用目录列表的功能，然后在serve的目录下创建一个serve.json文件，内容如下：

{
    "directoryListing": false
}

然后在命令行窗口，执行Ctrl+C，然后在运行serve，再次打开http://localhost:5000，页面将提示404。效果如下：