打包react项目如何指定端口
指定端口运行React项目
在开发或构建React项目时,可以通过以下方法指定运行端口:
通过环境变量指定端口
在项目根目录下创建或修改.env文件,添加以下内容:
PORT=3001
此方法适用于使用create-react-app创建的项目,修改后需要重启开发服务器。
通过package.json脚本指定端口
修改package.json中的scripts部分:

"scripts": {
"start": "set PORT=3001 && react-scripts start",
"build": "react-scripts build"
}
对于Linux/macOS系统,使用:
"start": "PORT=3001 react-scripts start"
运行时直接指定端口
在命令行中运行项目时直接指定端口:

PORT=3001 npm start
或者使用cross-env跨平台设置:
npx cross-env PORT=3001 npm start
修改webpack配置(高级)
对于弹出了webpack配置的项目,可以修改config/webpackDevServer.config.js文件:
port: process.env.PORT || 3001
生产环境指定端口
对于生产环境构建后的项目,可以使用serve工具指定端口:
npx serve -l 3001 build
这些方法可以根据不同环境和需求选择使用,确保端口设置后不会与其他应用冲突。






