当前位置:首页 > React

打包react项目如何指定端口

2026-01-24 23:40:47React

指定端口运行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工具指定端口:

打包react项目如何指定端口

npx serve -l 3001 build

这些方法可以根据不同环境和需求选择使用,确保端口设置后不会与其他应用冲突。

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

相关文章

vue实现项目依赖

vue实现项目依赖

安装 Vue.js 项目依赖 使用 Vue CLI 或 Vite 创建项目后,通过 package.json 文件管理依赖。运行以下命令安装所有依赖: npm install 添加新依赖 通过 np…

jquery项目

jquery项目

jQuery项目简介 jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。尽管现代前端框架(如React、Vue)逐渐流行,jQuery仍广泛用…

Vue项目实现rem

Vue项目实现rem

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

前端vue项目实现https

前端vue项目实现https

实现Vue项目的HTTPS配置 在Vue项目中启用HTTPS可以通过多种方式实现,具体取决于开发环境和部署方式。以下是常见的几种方法: 开发环境配置HTTPS 在本地开发时,可以通过Vue CLI或…

纯vue项目实现甘特图

纯vue项目实现甘特图

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

vue项目实现自适应

vue项目实现自适应

实现Vue项目自适应的方案 使用CSS媒体查询 在Vue组件或全局CSS中定义不同屏幕尺寸下的样式规则。通过@media实现响应式布局,适配不同设备宽度。 /* 示例:移动端优先的媒体查询 */ .…