在日常的开发中，我们会经常需要在本地开发环境中使用 vue 框架进行开发，在进行开发的过程中，我们的 vue 应用不支持外部访问，因此我们需要设置一个固定的 ip 地址来进行访问，本文将为大家介绍如何在 vue 中设置固定 ip 地址的方法。
一、改变默认端口
访问地址通常为 http://localhost:8080，我们可以更改默认的端口号为我们需要的端口号，这里我们以端口号为 8000 为例，具体操作如下：
- 打开项目根目录下的 config/index.js 文件。
- 找到 dev 对象，更改其 port 属性的值为你需要的端口号，如下代码所示：
dev: {
port: 8000,
// ...
}- 保存文件后，运行以下命令，重新启动项目：
npm run dev
这时候我们访问地址就会从 http://localhost:8080 变成 http://localhost:8000，方便我们进行后续的操作。
二、修改 host
立即学习“前端免费学习笔记（深入）”；
如果我们希望在同一局域网内的其他设备访问我们的应用，我们可以在 host 文件中添加我们需要的固定 IP 地址，具体操作如下：
- 在系统搜索栏中输入记事本，以管理员身份运行。
- 打开 C:\Windows\System32\driver\etc 目录下的 hosts 文件。
- 在文件末尾添加以下代码，将域名
localhost绑定到我们需要的固定 IP 地址上。
# 网站IP绑定 127.0.0.1 localhost 192.168.1.100 localhost
其中 192.168.1.100 是我们绑定的固定 IP 地址，可以替换成你需要的 IP 地址。
- 保存 hosts 文件后，重启电脑。
- 打开 CMD 或者 终端，输入
ipconfig命令，找到你当前连接的局域网，记录下 IPv4 地址。 - 在项目根目录下的 config/index.js 文件中找到 devServer 对象，将其 host 属性的值更改为你的 IPv4 地址，如下代码所示：
devServer: {
host: '192.168.1.100', // 记得替换成你的 IPv4 地址
// ...
}- 重新运行项目，在浏览器中输入
http://192.168.1.100:8000即可访问应用了。
三、结语
以上就是在 Vue 中设置固定 IP 地址的方法，可以让我们更方便地在同一局域网内的其他设备上访问我们的应用。希望本文对大家有所帮助。
