当前位置:首页 > 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项目登录实现

vue项目登录实现

实现登录功能的基本流程 在Vue项目中实现登录功能通常涉及前端页面构建、表单验证、API调用、状态管理及路由控制等环节。以下是具体实现方法: 创建登录页面组件 使用Vue单文件组件构建登录界面,包含…

vue框架实现项目

vue框架实现项目

Vue框架实现项目的核心步骤 环境准备与项目初始化 确保Node.js和npm/yarn已安装,使用Vue CLI或Vite创建项目: npm init vue@latest # Vue CLI…

vue项目实现非父子

vue项目实现非父子

Vue 项目中实现非父子组件通信的方法 在 Vue 项目中,非父子组件通信可以通过多种方式实现,以下是几种常见的方法: 使用 Vuex 状态管理 Vuex 是 Vue 的官方状态管理库,适用于中大型…

vue项目主题更换实现

vue项目主题更换实现

实现 Vue 项目主题更换的方法 使用 CSS 变量动态切换主题 在 Vue 项目中可以通过 CSS 变量结合 Vue 的响应式特性实现主题切换。定义一个基础样式文件,包含所有主题相关的 CSS 变量…

纯vue项目实现甘特图

纯vue项目实现甘特图

使用第三方库(如vue-gantt-elastic) 安装依赖库vue-gantt-elastic,该库专为Vue设计,支持拖拽、缩放、自定义样式等功能。 npm install vue-gan…

vue项目实现视频播放

vue项目实现视频播放

实现视频播放的基本方法 在Vue项目中实现视频播放可以通过HTML5的<video>标签或第三方库来完成。以下是几种常见的方法: 使用HTML5 <video>标签 在Vue…