如何使用CRACO启动自定义端口的React应用？

配置不生效的核心原因 #

你之前在scripts里写的PORT=5000 CRACO start没生效，是因为两点：

1. 类Unix系统（Mac/Linux）的环境变量写法不兼容Windows系统
2. 命令名CRACO为大写，实际本地安装的CRACO命令默认为小写craco，大小写不匹配也会导致配置失效

解决方案（按推荐优先级排序） #

方法1：跨平台通用配置（所有系统都可用） #

用cross-env抹平不同系统的环境变量设置差异：

1. 安装依赖：npm install cross-env --save-dev
2. 修改package.json的scripts字段：

{
  "scripts": {
    "start": "cross-env PORT=5000 craco start"
  }
}

方法2：根据终端/系统选择对应配置 #

无需安装额外依赖，根据自己常用的运行环境修改scripts即可：

• Mac/Linux终端："start": "PORT=5000 craco start"
• Windows cmd终端："start": "set PORT=5000 && craco start"
• Windows PowerShell终端："start": "env:PORT=5000; craco start"

方法3：通过.env文件配置 #

不需要修改scripts，直接在项目根目录新建.env文件，写入以下内容即可：

PORT=5000

CRACO会自动读取Create React App支持的所有原生环境变量，无需额外适配。

方法4：直接在craco.config.js中覆写devServer配置 #

如果上面的方法都不生效，可以直接修改webpack devServer的端口配置，打开你的craco.config.js添加如下字段：

module.exports = {
  // 你原来的其他配置，比如tailwind相关配置保持不变
  devServer: {
    port: 5000
  }
}

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