如何在 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:\Windows\System32\driver\etc 目錄下的 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中文網其他相關文章！