当前位置:首页 > React

打包react项目如何指定端口

2026-03-11 08:31:35React

指定端口运行 React 项目的方法

开发环境(使用 react-scripts
package.jsonscripts 部分修改 start 命令,通过 PORT 环境变量指定端口。例如设置为 3001

"scripts": {
  "start": "set PORT=3001 && react-scripts start"
}

Linux/macOS 需改用:

"start": "PORT=3001 react-scripts start"

通过 .env 文件配置
在项目根目录创建 .env 文件,添加以下内容:

打包react项目如何指定端口

PORT=3001

此方法跨平台兼容,无需修改 package.json

生产环境(静态服务器)
若使用 serve 部署,运行命令时指定端口:

打包react项目如何指定端口

serve -s build -l 3001

其他服务器(如 express)需在代码中配置端口:

const express = require('express');
const app = express();
app.use(express.static('build'));
app.listen(3001, () => console.log('Running on port 3001'));

注意事项

  • 确保指定端口未被其他程序占用。
  • 开发环境修改后需重启服务。
  • 生产环境需同步更新部署脚本或服务器配置。

标签: 端口项目
分享给朋友:

相关文章

vue ui实现创建vue项目

vue ui实现创建vue项目

使用 Vue UI 创建 Vue 项目的步骤 Vue CLI 提供了一个图形化界面(Vue UI)来创建和管理 Vue 项目。以下是详细的操作步骤: 安装 Vue CLI 确保已安装 Node.js…

vue 项目实现websocket

vue 项目实现websocket

安装依赖 在Vue项目中,使用WebSocket通常不需要额外安装依赖,因为浏览器原生支持WebSocket API。如果需要更高级的功能或封装,可以安装vue-native-websocket或so…

vue项目实现pdf

vue项目实现pdf

实现PDF生成与展示 在Vue项目中实现PDF功能通常涉及生成、预览或下载PDF文件。以下是几种常见场景的实现方法: 使用vue-pdf插件预览PDF 安装依赖: npm install vue-…

vue项目实现录音

vue项目实现录音

实现录音功能的基本思路 在Vue项目中实现录音功能通常需要借助浏览器提供的Web Audio API或第三方库。核心步骤包括获取麦克风权限、创建录音对象、处理音频数据以及保存录音文件。 使用Web…

vue项目实现打印

vue项目实现打印

Vue 项目中实现打印功能 在 Vue 项目中实现打印功能可以通过多种方式完成,以下是几种常见的方法: 使用 window.print() 方法 最简单的打印方式是调用浏览器的 window.pri…

vue实现手机项目

vue实现手机项目

Vue 实现手机项目的关键步骤 项目初始化与配置 使用 Vue CLI 或 Vite 创建项目,推荐选择 Vue 3 版本。安装必要的依赖如 vue-router、pinia(状态管理)和移动端适配库…