一、serve介绍

serve是基于node环境用来部署单页应用或静态站点的一个功能库

下载地址：https://www.npmjs.com/package/serve

安装：

> npm i -g serve

安装完成后就可以使用serve命令了，使用帮助如下：

> serve -h
OPTIONS

      --help                              Shows this help message
      -v, --version                       Displays the current version of serve
      -l, --listen listen_uri             Specify a URI endpoint on which to listen (see below) -
                                          more than one may be specified to listen in multiple places
      -d, --debug                         Show debugging information
      -s, --single                        Rewrite all not-found requests to `index.html`
      -c, --config                        Specify custom path to `serve.json`
      -C, --cors                                                  Enable CORS, sets `Access-Control-Allow-Origin` to `*`
      -n, --no-clipboard                  Do not copy the local address to the clipboard
      -u, --no-compression                Do not compress files
      --no-etag                           Send `Last-Modified` header instead of `ETag`
      -S, --symlinks                      Resolve symlinks instead of showing 404 errors
      --ssl-cert                          Optional path to an SSL/TLS certificate to serve with HTTPS
      --ssl-key                           Optional path to the SSL/TLS certificate's private key

这里主要介绍下-s参数，其意思是：重写所有未找到的请求到index.html

二、react使用

[project]> npm run build
[project]> serve -s build
WARNING: Checking for updates failed (use `--debug` to see full error)

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

默认是5000端口号，当然也可以修改端口号，示例如下：

[project]> serve -p 3000 build

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

从上面可以看出使用serve非常简单，相比通过express、php、nginx等方便多了

三、vue使用

vue使用和react一样，同样先打包，不过其打包的目录名不是build还是dist，这里指定下dist目录就行了

[project]> serve -s dist

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