ant design pro修改默认端口号 Windows系统下或者Mac系统下的ant design pro修改默认端口号改变较高版本的ant design pro默认打开的端口号

悠悠 2023-09-28 19:20 0阅读 0赞

#### 文章目录 ####

*  问题
 *  分析问题
 *  解决问题
 *   *  window系统下的问题解决
     *  Mac系统下的问题解决

修改`ant design pro`默认的端口号，在Windows系统下和在Mac系统下是不同的。

如果`--port=1234`无法解决你的问题，可以继续往下看，采用新的方式解决你的问题。

## 问题 ##

今天启动`ant design pro`项目时，发现其打开的端口号是`8000`，如下图所示：

![在这里插入图片描述][6e195cdc54f14e18a32c41cf82ab4996.png]  
`8000`端口号和我后端的`spring boot`项目冲突。

于是，需要修改`ant design Pro`默认的端口号，将端口号修改为`1234`。

## 分析问题 ##

想要修改`ant design pro`默认的端口号，就要知道端口号的配置在哪里？

端口号一般在配置文件中，`ant design pro`的配置文件是`package.json`。

于是，打开`package.json`文件，找到`scripts -> start`字段，如下图所示：

![在这里插入图片描述][c4058d8860fe495486a991b0030a1e89.png]

修改`"start": "cross-env UMI_ENV=dev max dev",`为如下所示：

"start": "cross-env UMI_ENV=dev max dev --port=1234",

执行指令`npm run start`重新启动，如下图所示：

![在这里插入图片描述][af31dbf126724f19a6cdcb893d95c2d3.png]

从上图可以看到，虽然输出了`cross-env UMI_ENV=dev max dev --port=1234`这个配置信息，但端口号依旧是`8000`，也就是说，端口号并没有修改过来。

出现这种情况的原因是，我使用的是较高版本的`ant design pro`。

## 解决问题 ##

### window系统下的问题解决 ###

我们并不能使用`--port=1234`的方式来修改默认的端口号，而是使用如下方式来修改：

"start": "set PORT=1234 && max dev",

![在这里插入图片描述][05b400163b464933b8c2791aa30a333f.png]

### Mac系统下的问题解决 ###

如果你的电脑是Mac系统，可以采用如下方式解决：

"start": "PORT=1234 && max dev",

[6e195cdc54f14e18a32c41cf82ab4996.png]: https://img-blog.csdnimg.cn/6e195cdc54f14e18a32c41cf82ab4996.png
[c4058d8860fe495486a991b0030a1e89.png]: https://img-blog.csdnimg.cn/c4058d8860fe495486a991b0030a1e89.png
[af31dbf126724f19a6cdcb893d95c2d3.png]: https://img-blog.csdnimg.cn/af31dbf126724f19a6cdcb893d95c2d3.png
[05b400163b464933b8c2791aa30a333f.png]: https://img-blog.csdnimg.cn/05b400163b464933b8c2791aa30a333f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，0人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ant Design Pro入门

目录一：了解Ant Design Pro 二：快速入门 -------------------- 一：了解Ant Design Pro Ant Design

小鱼儿/ 2024年03月30日 12:42/ 0 赞/ 128 阅读

相关 Vue-Ant Design Pro of Vue

[https://blog.csdn.net/gu\_wen\_jie/article/details/90444161][https_blog.csdn.net_gu_wen

爱被打了一巴掌/ 2023年06月27日 05:39/ 0 赞/ 49 阅读

相关 Ant Design Pro Vue使用心得

[https://blog.csdn.net/m0\_37938910/article/details/93318440][https_blog.csdn.net_m0_379

你的名字/ 2023年06月27日 05:38/ 0 赞/ 41 阅读

相关 reactjs_ant design pro前端框架入门

Ant Design Pro 是基于Ant Design的一个开箱即用的，企业级中后台前端/设计解决方案。 ![watermark_type_ZmFuZ3poZW5naGVp

红太狼/ 2023年06月12日 06:16/ 0 赞/ 91 阅读

相关 Ant-Design-Pro of Vue （一）

安装 vue-cli yarn 安装 vue-cli 有些坑，在这记录下来官方安装方法 `yarn global add @vue/cli` 在之前先卸载旧

╰半橙微兮°/ 2023年01月03日 09:20/ 0 赞/ 219 阅读

相关 ant design pro默认分页显示修改

做表格分页的时候，使用的是ant design pro ，分页器是封装好的，但是公司要求要与之前的公司产品看齐，他们用的比较老，因此需要重写分页器（我的项目要修改的不多，只需要

电玩女神/ 2022年12月28日 04:19/ 0 赞/ 286 阅读

相关 ant-design-vue-pro docker部署

ant-design-vue-pro docker部署 1、Dockerfile 在项目根路径下，内容： build stage FROM node:lt

悠悠/ 2022年11月05日 14:57/ 0 赞/ 296 阅读

相关 ant design pro 前端框架

ant design pro 框架官网地址：[https://pro.ant.design/docs/getting-started-cn][https_pro.ant.des

小咪咪/ 2022年04月08日 14:41/ 0 赞/ 512 阅读

相关 ant design pro （九）引入外部模块

一、概述原文地址：[https://pro.ant.design/docs/import-cn][https_pro.ant.design_docs_import-cn

刺骨的言语ヽ痛彻心扉/ 2022年03月29日 03:57/ 0 赞/ 539 阅读

相关 Vue-Ant Design Pro of Vue

Ant Design Pro of Vue 本来呢是想写一些关于[Ant Design Vue][]的文章，不过恰好用到了一个开源的基于Ant Design Vue 开发

雨点打透心脏的1/2处/ 2022年01月29日 15:55/ 0 赞/ 302 阅读