如何在 Vue 中设置固定 IP 地址

在日常的开发中，我们会经常需要在本地开发环境中使用 Vue 框架进行开发，在进行开发的过程中，我们的 Vue 应用不支持外部访问，因此我们需要设置一个固定的 IP 地址来进行访问，本文将为大家介绍如何在 Vue 中设置固定 IP 地址的方法。

一、改变默认端口

访问地址通常为 http://localhost:8080，我们可以更改默认的端口号为我们需要的端口号，这里我们以端口号为 8000 为例，具体操作如下：

1. 打开项目根目录下的 config/index.js 文件。
2. 找到 dev 对象，更改其 port 属性的值为你需要的端口号，如下代码所示：

dev: {
  port: 8000,
  // ...
}

3. 保存文件后，运行以下命令，重新启动项目：

npm run dev

这时候我们访问地址就会从 http://localhost:8080 变成 http://localhost:8000，方便我们进行后续的操作。

二、修改 host

如果我们希望在同一局域网内的其他设备访问我们的应用，我们可以在 host 文件中添加我们需要的固定 IP 地址，具体操作如下：

1. 在系统搜索栏中输入记事本，以管理员身份运行。
2. 打开 C:WindowsSystem32driveretc 目录下的 hosts 文件。
3. 在文件末尾添加以下代码，将域名 localhost 绑定到我们需要的固定 IP 地址上。

# 网站IP绑定
127.0.0.1       localhost
192.168.1.100   localhost

其中 192.168.1.100 是我们绑定的固定 IP 地址，可以替换成你需要的 IP 地址。

4. 保存 hosts 文件后，重启电脑。
5. 打开 CMD 或者 终端，输入 ipconfig 命令，找到你当前连接的局域网，记录下 IPv4 地址。
6. 在项目根目录下的 config/index.js 文件中找到 devServer 对象，将其 host 属性的值更改为你的 IPv4 地址，如下代码所示：

devServer: {
  host: '192.168.1.100', // 记得替换成你的 IPv4 地址
  // ...
}

7. 重新运行项目，在浏览器中输入 http://192.168.1.100:8000 即可访问应用了。

三、结语

以上就是在 Vue 中设置固定 IP 地址的方法，可以让我们更方便地在同一局域网内的其他设备上访问我们的应用。希望本文对大家有所帮助。

以上是如何在 Vue 中设置固定 IP 地址的详细内容。更多信息请关注PHP中文网其他相关文章！