Yarn Serve本地运行IP经常变的解决方法
在开发过程中，我们经常会使用yarn serve来启动本地服务器进行调试和测试。然而，有时候我们会遇到一个问题，就是每次运行yarn serve时，本地服务器的IP地址经常会发生变化，导致我们需要不断修改配置文件或者代码中的IP地址，这样非常不方便。那么，应该如何解决这个问题呢？
问题分析
在使用yarn serve启动本地服务器时，我们通常会看到类似如下的输出：
DONE Compiled successfully in 1234ms
App running at:
- Local: http://localhost:8080/
- Network:
可以看到，yarn serve会在控制台中显示本地服务器的IP地址，而这个IP地址可能会发生变化，造成不便。
解决方法
解决这个问题的方法是通过配置webpack的devServer选项来指定本地服务器的IP地址，这样每次运行yarn serve时都会使用指定的IP地址。下面是具体的操作步骤：
- 打开
vue.config.js（如果不存在则创建）文件，在文件中添加如下配置：
module.exports = {
devServer: {
host: '192.168.1.2' // 指定本地服务器的IP地址
}
}
- 保存
vue.config.js文件并重新运行yarn serve，这样就可以确保每次启动本地服务器时都会使用指定的IP地址。
实例操作
下面是一个具体的示例，假设我们需要将本地服务器的IP地址固定为192.168.1.2：
module.exports = {
devServer: {
host: '192.168.1.2'
}
}
保存vue.config.js文件，然后重新运行yarn serve，可以看到本地服务器的IP地址已经被固定为192.168.1.2，不再发生变化。
总结
通过配置webpack的devServer选项，我们可以轻松地固定本地服务器的IP地址，避免每次运行yarn serve时IP地址发生变化的问题。这样可以提高开发效率，让我们更专注于代码的开发和调试工作。希望以上方法对你有所帮助！
甘特图示例
gantt
title 项目开发进度表
section 项目策划
讨论需求 :done, task1, 2022-01-01, 7d
讨论设计 :done, task2, after task1, 7d
制定计划 :active, task3, after task2, 1d
section 项目开发
开发功能A : crit, done, task4, 2022-01-10, 7d
开发功能B : crit, done, task5, after task4, 7d
联调测试 :crit, done, task6, after task5, 5d
section 项目上线
部署上线 :crit, active, task7, 2022-01-25, 2d
旅行图示例
journey
title 旅行日程
section 出发
买机票 : done, active
打包行李 : done, active
section 旅途
坐飞机 : done
入住酒店 : done
游览景点 : active
section 回家
结束旅行 : active
上传照片 :
通过本文我们学会了如何通过配置webpack的devServer选项来固定本地服务器的IP地址，避免yarn serve本地运行IP经常变化的问题。希望对你有所帮助！
