当前位置:首页 > 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'));

注意事项

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

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

相关文章

react如何接入项目

react如何接入项目

创建React项目 使用create-react-app快速初始化项目: npx create-react-app my-app cd my-app npm start 适用于全新项目,自动配置…

vue的项目实现

vue的项目实现

Vue 项目实现步骤 初始化项目 使用 Vue CLI 或 Vite 创建新项目: npm create vue@latest # Vue CLI npm create vite@latest…

vue实现echarts项目

vue实现echarts项目

vue3 中集成 ECharts 安装 ECharts 依赖包 npm install echarts --save 在组件中引入并初始化 import * as echarts from 'ec…

vue项目实现打印

vue项目实现打印

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

Vue项目实现rem

Vue项目实现rem

Vue 项目中实现 rem 适配方案 在 Vue 项目中实现 rem 适配,主要目的是让页面元素根据屏幕尺寸自动调整大小。以下是几种常见方法: 使用 postcss-pxtorem 插件 安装 po…

vue实现的项目

vue实现的项目

Vue 项目实现方法 使用 Vue.js 实现项目通常涉及以下关键步骤和技术要点。 项目初始化 通过 Vue CLI 或 Vite 创建项目框架。Vue CLI 提供标准化模板,适合传统项目;Vit…