配置Vite获取内网IP（Vue3项目ts版本获取本机局域网IP地址)-Toy模板网

这篇具有很好参考价值的文章主要介绍了配置Vite获取内网IP（Vue3项目ts版本获取本机局域网IP地址)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

参考文章：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的函数

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.在导出配置对象中添加设置环境变量的代码

import { defineConfig } from 'vite';

// ...

export default defineConfig({
  // ...

  build: {
    // ...
  },

  server: {
    // ...
  },

  plugins: [
    // ...
  ],

  // 设置环境变量(重点)
  // 注意：define 中的键名应该是 'import.meta.env.BASE_IP'，这是 Vite 中用于定义环境变量的方式。
  define: {
    'import.meta.env.BASE_IP': JSON.stringify(`http://${getNetworkIp()}:${process.env.PORT || 3000}`),
  },
});

注意：
1.define 中的键名应该是 'import.meta.env.BASE_IP'，这是 Vite 中用于定义环境变量的方式。
2.替换 http://${getNetWorkIp} 为你实际想要设置的基础IP地址，确保这是一个字符串。
3.确保端口号 process.env.PORT || 3000 配置正确，可以根据你的需求进行更改。

接着保存 vite.config.ts 文件。并且重新启动你的 Vite 项目。确保在重新启动后，新的配置生效。

现在，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环境变量的值并进行使用，比如用于构建API请求的URL等。

遇到的部分小问题:

在 Vite 项目中，import.meta.env 是在构建时由 Vite 注入的环境变量，而不是在运行时从网络获取的。因此，在代码中调用 const baseIP = import.meta.env.BASE_IP; 不需要网络连接

如果 import.meta.env.BASE_IP 返回 undefined，那么有可能是配置环境变量的步骤有问题或者配置没有生效。请确保已经按照之前的步骤正确配置了 vite.config.ts 中的 define 选项来设置 BASE_IP。

如果配置没有问题，可以尝试以下几个步骤来排除问题：

确保你的 Vite 项目已经重新启动，以确保配置的变更已经生效。
如果你在设置环境变量时使用了特定的 Vite 插件或者工具，确保这些工具也是最新的版本，并且没有与其他插件发生冲突。
在 vite.config.ts 中检查 define 配置的拼写和语法错误。确保 BASE_IP 已经被正确设置为字符串。
如果你使用的是开发服务器，确保你的环境变量是在服务器启动前设置的。有时，如果你在服务器已经启动后设置环境变量，它们可能不会立即生效。
检查是否有其他全局或局部的环境变量配置影响了 BASE_IP 的值。
如果你使用了任何代码拆分或动态导入，确保 BASE_IP 的访问方式没有被异步操作阻碍，以致于导致 undefined。文章来源地址https://www.toymoban.com/news/detail-754015.html