解决http-server和vue启动默认端口8080冲突问题

前言

        （水字数，解决方案看下一章...）

        今天准备下家公司入职的部分学习，想到部署这些必不可少，于是乎用了以前在大学里面用过的http-server服务来运行vue打包好的dist文件，但在打包之前测试项目运行的时候，也就是在vue项目启动后，ip后的是vue的默认端口8080，访问进去却是http-server默认启动的页面，由于目标没有指定默认的HTML文件（如index.html），所以它默认展示了目录列表。

        在通过终端输入指令：

netstat -ano | findstr :8080

         查到确实有两个8080端口共存了，于是乎就执行杀掉8080进程指令再试，每个人的pid是不一样的，在创建进程的时候会随机生成一个pid，故而执行下面指令的时候先执行上面的指令，获取到最后的那个pid后再根据实际情况来杀死对应的8080进程。

taskkill -pid 16372 -f

解决办法

        办法一：改变http-server的默认端口

         因为http-server的默认端口和vue启动的默认端口一致，本方法是通过改变http-server的默认端口从而避免与vue端口冲突，找到与vue端口号8080冲突的文件目录，进入目录下，在终端处输入：

http-server -p 3000

        给指定的http-server的端口号3000，避免和vue启动的8080端口冲突了，如果要关闭，按住Ctrl+C结束运行即可。

        地址栏处应该是8080（这里我是后面改成了3000的，本来是冲突的）。通过访问http-server启动的页面，找到对应的根目录，在根目录处输入http-server -p 3000，就是下图所示。

         办法二：改变http-server的默认端口配置文件

        如果http-server是安装在全局下的，就在全局下的node文件夹中找到node_modules>http-server。

        目录文件：node_modules\http-server

        在http-server目录下进入bin，在bin文件中修改http-server的配置，找到以下内容：（3000是修改的默认配置端口），将默认的8080改成自定义端口号。

    '  -p --port    Port to use. If 0, look for open port. [3000]',

if (!port) {
  portfinder.basePort = 3000;
  portfinder.getPort(function (err, port) {
    if (err) { throw err; }
    listen(port);
  });
} 

        办法三： 修改vue默认端口号

        如果办法一、二出于某种原因而修改不了或无效，那就直接修改vue启动的端口号。找到vue.config.js文件。在devServer中加上port:9500（9500端口可根据自身情况自定义）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 9500
  }
})

结语

       文章提供了三种解决 http-server 默认端口和 Vue.js 默认端口冲突的方法。第一种方法是改变 http-server 的默认端口；第二种方法是修改 http-server 的默认配置文件；第三种方法是改变 Vue.js 的默认端口。采用这些方法，你应该能轻松解决端口冲突问题，使你的服务可以顺利运行。

        通过学习和实践，我希望你能更好地理解网络服务和开发服务如何共存和交互。记住，虽然我们需要调试和解决问题，但这是学习过程的一部分。我希望这篇文章对你有所帮助，如果你有其他问题，可以在评论区留言，我会尽快给出答复。

        总的来说，这篇文章应该给你提供了关于如何解决端口冲突的一些基本知识和技术。希望你在实践中找到最适合你项目的解决方案。

        新人开发小白，有多数知识点还有所欠缺，文中大多白话文，大佬见谅，往后我会继续努力！

参考博客：

       1.更换端口httpserver:[emerg] bind() to 0.0.0.0:8080 failed (98: Address already in use)-CSDN博客

2.https://blog.csdn.net/weixin_33901843/article/details/92448805