修改react18默认端口、默认开启浏览器等配置的三种方法

第一种方法：

在package.json文件中，

找到

"scripts": {
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js"
},

在start这一项中添加配置，改为：

// set BROWSER=none是关闭自动开启浏览器功能
// set PORT=8080是修改默认端口号
"start": "set BROWSER=none && set PORT=8080 && node scripts/start.js",

修改配置后重启项目。

---

第二种方法：cross-env

使用上面那种方法，在Win10系统可能会出现这种弹窗提示：

不用慌，点击确定或x掉就能继续用。

解决这个报错也可以安装一个插件：

npm install cross-env --save-dev

然后修改package.json文件中的启动项：

把

"scripts": {
  "start": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js"
},

修改为：

"scripts": {
  "start": "cross-env BROWSER=none Port=8080 node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js"
},

npm start重启一下，修改成功，且win10系统下也没有报错了。

---

第三种方法：

在react18中使用npm run eject指令后，会暴露出config文件夹，

在config/scripts/start.js中，找到

openBrowser(urls.localUrlForBrowser);

这一行是用来开启浏览器的，注释掉即可关闭自动开启浏览器功能。

同样的，在该文件中找到

const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;

把里面的3000改为8080，即可把默认的3000端口，改为8080端口。

修改后重启项目。