參考文章：vue項目獲取本機局域網IP地址（vue.config.js版本)

在Vite中，沒有vue.config.js文件，而是使用vite.config.js（或vite.config.ts，如果項目使用TypeScript）來配置項目；

1.獲取 IP 需要借助?os?模塊，需要先安裝依賴：

npm install os

2.其次在vite.config.ts中引用模塊

import os from 'os';

?3.接著，添加一個獲取本機內網IP的函數(shù)

function getNetworkIp() {
  let needHost = '';
  try {
    const network = os.networkInterfaces();
    for (const dev in network) {
      const iface = network[dev];
      if (iface) { // 添加這個條件檢查，確保iface有被定義
        for (let i = 0; i < iface.length; i++) {
          const alias = iface[i];
          if (
            alias.family === 'IPv4' &&
            alias.address !== '127.0.0.1' &&
            !alias.internal
          ) {
            needHost = alias.address;
          }
        }
      }
    }
  } catch (e) {
    needHost = 'localhost';
  }
  return needHost;
}

?4.在導出配置對象中添加設置環(huán)境變量的代碼

import { defineConfig } from 'vite';

// ...

export default defineConfig({
  // ...

  build: {
    // ...
  },

  server: {
    // ...
  },

  plugins: [
    // ...
  ],

  // 設置環(huán)境變量(重點)
  // 注意：define 中的鍵名應該是 'import.meta.env.BASE_IP'，這是 Vite 中用于定義環(huán)境變量的方式。
  define: {
    'import.meta.env.BASE_IP': JSON.stringify(`http://${getNetworkIp()}:${process.env.PORT || 3000}`),
  },
});

• 注意：

• 1.define 中的鍵名應該是 'import.meta.env.BASE_IP'，這是 Vite 中用于定義環(huán)境變量的方式。

• 2.替換 http://${getNetWorkIp}?為你實際想要設置的基礎IP地址，確保這是一個字符串。
• 3.確保端口號 process.env.PORT || 3000 配置正確，可以根據(jù)你的需求進行更改。
  
  接著保存 vite.config.ts 文件。并且重新啟動你的 Vite 項目。確保在重新啟動后，新的配置生效。

現(xiàn)在，import.meta.env.BASE_IP?能夠在項目中被正確訪問，包含你在 vite.config.ts 中設置的值。

?5.在vue界面中調用BASE_IP的值

const baseIP = import.meta.env.BASE_IP;
console.log(baseIP); // 輸出BASE_IP的值

這將允許你在你的代碼中獲取到BASE_IP環(huán)境變量的值并進行使用，比如用于構建API請求的URL等。

遇到的部分小問題:

在 Vite 項目中，import.meta.env 是在構建時由 Vite 注入的環(huán)境變量，而不是在運行時從網絡獲取的。因此，在代碼中調用 const baseIP = import.meta.env.BASE_IP; 不需要網絡連接

如果 import.meta.env.BASE_IP 返回 undefined，那么有可能是配置環(huán)境變量的步驟有問題或者配置沒有生效。請確保已經按照之前的步驟正確配置了 vite.config.ts 中的 define 選項來設置 BASE_IP。

如果配置沒有問題，可以嘗試以下幾個步驟來排除問題：

1. 確保你的 Vite 項目已經重新啟動，以確保配置的變更已經生效。

2. 如果你在設置環(huán)境變量時使用了特定的 Vite 插件或者工具，確保這些工具也是最新的版本，并且沒有與其他插件發(fā)生沖突。

3. 在 vite.config.ts 中檢查 define 配置的拼寫和語法錯誤。確保 BASE_IP 已經被正確設置為字符串。

4. 如果你使用的是開發(fā)服務器，確保你的環(huán)境變量是在服務器啟動前設置的。有時，如果你在服務器已經啟動后設置環(huán)境變量，它們可能不會立即生效。

5. 檢查是否有其他全局或局部的環(huán)境變量配置影響了 BASE_IP 的值。

6. 如果你使用了任何代碼拆分或動態(tài)導入，確保 BASE_IP 的訪問方式沒有被異步操作阻礙，以致于導致 undefined。文章來源地址http://www.zghlxwxcb.cn/news/detail-754015.html

到了這里，關于配置Vite獲取內網IP（Vue3項目?ts版本獲取本機局域網IP地址)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！