当前位置:首页 > 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工具指定端口:

npx serve -l 3001 build

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

打包react项目如何指定端口

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

相关文章

vue 实现的项目

vue 实现的项目

Vue 实现的项目类型 Vue.js 是一个渐进式 JavaScript 框架,适用于构建各种规模的项目。以下是一些常见的 Vue 实现项目类型: 单页应用 (SPA) Vue 非常适合构建单页应用…

react项目如何

react项目如何

创建React项目 使用create-react-app工具快速初始化项目。确保已安装Node.js(建议版本≥12.0.0),运行以下命令生成新项目: npx create-react-app m…

uniapp项目案例

uniapp项目案例

uniapp项目案例概述 uniapp作为跨平台开发框架,广泛应用于多端应用开发(H5、小程序、App等)。以下是一些典型项目案例及实现方法,涵盖电商、社交、工具等场景。 电商类案例 案例:…

uniapp项目教程

uniapp项目教程

uniapp项目教程 uniapp 是一个基于 Vue.js 的跨平台开发框架,支持一次开发,多端发布(包括 iOS、Android、H5、小程序等)。以下是详细的教程指南,帮助快速上手 uniapp…

uniapp项目实战

uniapp项目实战

创建UniApp项目 通过HBuilderX新建项目,选择UniApp模板,填写项目名称和存储路径。根据需求选择默认模板或自定义配置,如Vue3版本支持。 配置基础环境 在manifest.js…

如何搭建react项目

如何搭建react项目

使用 Create React App 搭建项目 Create React App (CRA) 是官方推荐的快速搭建 React 项目的工具,无需配置构建工具(如 Webpack 或 Babel)。…