改 Vue 端口号

昨天在配 Java 的运行环境 的 时候发现先安装 的Tomcat 的默认端口号也是8080 ，这跟 Vue 默认的端口号冲突了 ，导致博主早上来公司 打开昨天写的项目，发现 命令行报错 ，用图像化 界面打开 Vue脚手架发现，打开的是Tomcat 登录成功的页面。一开始看到熟悉的绿色页面变成一只黄色的猫还有点蒙逼，后来意识到 可能是自己电脑 刚装好的 Tomcat 在作祟，博主怀疑是端口冲突 。所以到网上查询各位大拿的 博客 看看哪里能修改端口 。失望的发现网上都是 说找什么config 目录下的文件。可是大家知道 自从Vue 更新到3x版本之后 就没有了config文件。所以根本就不存在 config 下面的 index.js 最终博主通过层层翻找 终于找到了修改端口 的配置 所以在这里给大家分享一下 希望碰到一样问题的 各位同行 能通过这篇博文 快速解决问题

闲话有点多，以下是步骤：

先找到 node_modules 文件 不要说没有，如果真没有 伙计 你删了项目从来吧。。。

[外链图片转存失败(img-Afr4a5XN-1565318005493)(C:\Users\leon\Desktop\1.bmp)]

第二步 是找到 @Vue 这个文件夹

[外链图片转存失败(img-ET0NdrH8-1565318005494)(C:\Users\leon\Desktop\2.png)]

第三步 是找到 cli-service 这个文件夹

[外链图片转存失败(img-NV7FFgH8-1565318005494)(C:\Users\leon\Desktop\3.png)]

第四步 是找到 下面的子 文件夹 lib

[外链图片转存失败(img-5QqV5QJs-1565318005495)(C:\Users\leon\Desktop\4.png)]

第五步 是找到 lib 下面的子文件 options.js 文件

[外链图片转存失败(img-CZkST1eQ-1565318005495)(C:\Users\leon\Desktop\5.png)]

最后一步 就是 翻到这个文件最底部 找到 devServer: 这个配置对象 解开 它的注释 把 port 的值改成 你想运行的端口号就可以了 博主这里 改成了8081 具体如下：

[外链图片转存失败(img-dhs6PX50-1565318005495)(C:\Users\leon\Desktop\6.png)]

接下来就可以了 重启一下 Vue 你就会发现端口已经改了