react umi 修改默认端口

最新推荐文章于 2025-04-20 09:53:55 发布

原创最新推荐文章于 2025-04-20 09:53:55 发布 · 8.5k 阅读

5 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

28 篇文章

订阅专栏

本文深入解析前端项目中package.json文件的作用与属性，包括scripts、dependencies和devDependencies的使用，以及如何通过修改该文件来调整项目的默认端口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为一个前端，居然被一个端口号给为难了，这不能忍。其实此前一直对package.json的理解不是很透彻，所以这次就详细的查看一些文档，记录一下。

package.json 的作用

它包含了整个项目所依赖的模块以及项目的配置信息。

package.json 的属性

1、scripts
通常它指定了npm、yarn等命令行的缩写，比如start指定了运行npm run start时，要执行的命令，build指定了运行npm run build时要执行的命令
2、dependencies
指定项目运行所依赖的模块，即：开发版和发布版都需要的依赖。
3、devDependencies
指定项目开发所需要的模块，即：开发版需要但发布版不需要，例如关于测试的、文档类的。

npm install <package_name> --save 表示将这个包名及对应的版本添加到 package.json的 dependencies
npm install <package_name> --save-dev 表示将这个包名及对应的版本添加到 package.json的 devDependencies

修改默认端口的方法

1、使用cross-env，
在这里插入图片描述

"start": "cross-env PORT=8001 umi dev",

需要安装cross-env
npm install cross-env  --save-dev

2、直接set PORT

"start":"set PORT=9000 && react-scripts start",

这里需要说明一下，mac版和window不一样
windows版可以直接使用方法2，set PORT=xxx。。
Mac版语法是直接 PORT=xxx

参考了很多文章以及自己实践最后的总结。希望也能帮到你。