【React启动端口设置】不用node_modules永久设置端口方法

于 2023-10-10 15:52:51 发布
阅读量482 收藏 2
点赞数 1
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51076986/article/details/133748700
版权

不用修改 node_modules/react-scripts/scripts/start.js！

也不用安装 cross-env 插件！

参考来自 Changing default Host and Port in React.JS – TecAdmin

非常简单的方法

在根目录下创建 .env 文件

输入 PORT=xxx 保存即可！

原理：package.json 中，scripts.start 对应的命令是 `react-scripts start` ，于是我们找到 node_modules/react-scripts/scripts/start.js 文件的 55 行附近：

如果 process.env.PORT 未设置，项目就会默认在 3000 端口启动。

目前测试过的有效方法，就是新建 .env 文件，内容设置端口，重启项目立即生效。

maomaomaomaom
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
react修改启动端口_React（博客系列一），环境搭建
weixin_39849894的博客
01-31 278
写在前面：工作一年多了，一直想有个自己的博客，因为懒，所以一直拖着。今天开个篇，用React+TypeScript(野生学的，勿喷?)搭建一个自己的博客系统，博客会持续完善，所以文章也会一直更新✈✈✈创建项目官网搭建地址：https://create-react-app.dev/docs/adding-typescript/yarncreatereact-appmy-app--t...
JavaScript React如何修改默认端口号方法详解
01-19
这个文件的位置在：node_modules文件夹下 -> react-scripts文件夹下 -> scripts文件夹下 -> start.js node_modules下 start.js文件 51行处修改，整个文件端口号只出现一次 修改后运行结果 写到这里就结束了，...
react项目中更改默认端口为其它值
corner2030的博客
10-09 812
通过create-react-app创建的工程，使用npm start起来的端口都是3000。 那么我们如果更改为其它端口呢？ 第一步：安装cross-env npm install cross-env --save 第二步：在package.json中配置9000端口 将"start": "node scripts/start.js", 改为 "start": "cross-env PORT=9...
React 开发环境设置端口
我的博客
05-16 865
方案一： 全局安装cross-env npm install cross-env -g 修改package.json "scripts": { "start": "cross-env PORT=5000 react-scripts start", //... } 方案二： window "scripts": { "start": "set PORT=5000 && react-scripts start", // ... } mac.
react修改项目启动端口号
weixin_69903461的博客
06-23 731
3、搜索 DEFAULT_PORT。1、打开“node_modules”
解决 react 项目启动端口冲突
最新发布
林夕
09-25 668
这将列出使用8070端口的进程信息，包括进程ID（PID）。使用以下命令杀死该进程（用你实际找到的PID替换。打开命令提示符（Command Prompt）。找到占用8070端口的进程，并记下其PID。
react修改默认端口
CHNIM的博客
01-01 916
修改node-modules/react-script/start.js的代码，不想改代码的可以直接加载启动参数里 process.env.PORT 参数就是获取环境变量设置的port 修改package.json,增加一个命令 linux或者mac "dev":"export PORT=4000 && react-scripts start", windows "dev":"set PORT=4000 && react-scripts start", .
react_reflux_webpack_starter
07-16
在"react_reflux_webpack_starter"项目中，这个命令将编译项目源码，然后在指定的端口上启动一个热加载的本地服务器，使得开发者可以实时预览和调试应用。 六、项目结构解析 在"react_reflux_webpack_starter-...
React的学习Day5
01-20
Day5 yarn 和npm 命令对比表格 命令对比表 ...项目的目录/node_modules/react-scripts/scripts/start.js const DEFAULT_PORT = parseInt(process.env.PORT, 10) || XXXX; eslint报错no-restricted-global
api_call_react_redux:api_call_react_redux
05-29
如果是这样，请转到/node_modules/webpack-dev-server/bin/webpack-dev-server.js并将“8080”的 2 个实例更改为“8000”或您想要的任何端口 然后访问或您将其更改为的任何端口 编译 将所有 js 编译到 dist/app....
NodeJS_ReactJS:项目正在考虑React Js，Node Js，Bootstrap，数据库的内容
05-24
使用React JS for FrontEnd和Node JS for BackEnd开发的商店 要使用此项目，您需要： git clone克隆项目或下载.zip 创建数据库及其表。... 做/ node_modules安装，最后一个npm启动 React在端口3000上运行
react 本地服务器端口号配置
weixin_44785498的博客
02-02 987
react 本地项目端口号配置 修改 react 本地服务器端口号 查看源码： // node_modules/react-scripts/scripts/start.js /** * Copyright (c) 2015-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of
React 配置文件(三)配置本地IP地址和端口号
qqqqqqqq188的专栏
12-30 2554
React动态配置域名和端口号
create-react-app 指定端口号
qq_36418624的博客
04-23 1231
create-react-app生成的项目，默认端口号是3000。 如果想要修改端口号有好几种方法，但是我并不建议去修改存放在node_modules文件夹中的相关配置，也不建议使用npm run eject喷射释放出配置文件。因为很多时候，项目可能会删除node_modules，重新npm install，而释放配置文件又是一个不可逆的操作。 所以，推荐使用直接在package.json 里面配...
React项目创建并打包到云服务器指定端口
哼哼哈嘿的博客
06-05 654
1.输入命令npm run build打包react工程文件，完成后会生成一个如下图所示的build文件夹 2.将build文件放到服务器中 3.在nginx目录下新建一个vhost文件夹，文件夹下新建一个example.conf文件 server { listen 5000; //你所需要打开的端口 server_name （你的ip）; //你的IP地址 root /www/server/nginx/user/my-react/build; //build文件的地址
react修改默认启动端口号
wingsky666的博客
05-05 489
react修改默认启动端口号 package.json "scripts": { "start": "set PORT=8888 && react-scripts start ", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
react 修改启动端口
m0_37645059的博客
03-17 1516
react项目根目录 package.json 更改script中 “scripts”: { “start”: “react-scripts start”, “build”: “react-scripts build”, “test”: “react-scripts test”, “eject”: “react-scripts eject” }, “start”: “react-scripts s...
react修改端口的几种方法
hsany330的专栏
04-22 2159
第一种 方法： 执行npm run eject命名，显示react项目的配置文件，在start.js文件DEFAULT_PORT修改你需要的端口号​​​​​ 第二种方法：在项目的 package.json里面找到start， 加上set PORT=9000 && 第三种方法：在node_modules文件夹中找到react-scri...
react请求接口方式
weixin_46918498的博客
05-13 1409
1.jQuery， axios 基于xhr 的封装, axios 是promise 风格 可以解决回调地狱 2.fetch: 原生函数，不用下载， 不用xhr ，也能发送请求， 内置的函数， 本身也是promise的风格 老版本浏览器可能不支持 xhr不符合关注分离的原则 search = aysnc() => { try{ let res = await fetch('http://') let data = await res.json() console.l
nextjs+react报错：./node_modules/antd/es/badge/style/index.less Global CSS cannot be imported from within node_modules.
05-22
这个错误是因为less文件中引入了全局CSS，而Next.js默认不允许从node_modules中导入全局CSS。 解决方案有两种： 1.在next.config.js中配置webpack，允许导入全局CSS。 ```javascript const withLess = require('@zeit/next-less'); module.exports = withLess({ webpack: (config, { isServer }) => { if (isServer) { const antStyles = /antd\/.*?\/style.*?/; const origExternals = [...config.externals]; config.externals = [ (context, request, callback) => { if (request.match(antStyles)) return callback(); if (typeof origExternals[0] === 'function') { origExternals[0](context, request, callback); } else { callback(); } }, ...(typeof origExternals[0] === 'function' ? [] : origExternals), ]; config.module.rules.unshift({ test: antStyles, use: 'null-loader', }); } return config; }, }); ``` 2.将全局CSS导入到页面中。 在页面的`<Head>`标签中加入以下代码，将antd的样式文件直接引入到页面中。 ```html <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.min.css" /> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值