React JS项目build打包后启动npm serve服务如何指定运行端口

• 如果你只需要单次临时修改端口，直接在启动命令中指定监听端口即可，执行命令：
  serve -s build -l 3000
  其中-l参数是listen的缩写，用来指定服务监听的端口号。

如果你希望固定配置，不需要每次启动都手动加端口参数，可以选择以下任意一种方案：

方案1：新增项目级serve配置文件 #

在项目根目录新建名为serve.json的配置文件，写入以下内容：

{
  "public": "build",
  "listen": 3000
}

配置完成后，你只需要在项目根目录执行serve命令，就会自动读取配置，以3000端口启动build目录的静态资源服务。

方案2：修改package.json的脚本配置 #

你可以将启动命令封装为npm脚本，打开项目根目录的package.json文件，在scripts字段中新增对应脚本即可：

{
  "scripts": {
    // 保留你原有其他脚本配置
    "serve:build": "serve -s build -l 3000",
    // 如果需要打包后自动启动服务，可以加下面这行
    "build:start": "npm run build && serve -s build -l 3000"
  }
}

配置完成后，执行npm run serve:build即可直接启动build目录的3000端口静态服务，执行npm run build:start则会先执行打包，再自动启动服务。

注意：如果执行命令时提示serve命令不存在，可先执行npm install -g serve全局安装serve工具，也可以在项目内执行npm install serve -D安装为开发依赖。

内容的提问来源于stack exchange，提问作者Icaro Amorim