参考文章: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

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

  1. 确保你的 Vite 项目已经重新启动,以确保配置的变更已经生效。

  2. 如果你在设置环境变量时使用了特定的 Vite 插件或者工具,确保这些工具也是最新的版本,并且没有与其他插件发生冲突。

  3. vite.config.ts 中检查 define 配置的拼写和语法错误。确保 BASE_IP 已经被正确设置为字符串。

  4. 如果你使用的是开发服务器,确保你的环境变量是在服务器启动前设置的。有时,如果你在服务器已经启动后设置环境变量,它们可能不会立即生效。

  5. 检查是否有其他全局或局部的环境变量配置影响了 BASE_IP 的值。

  6. 如果你使用了任何代码拆分或动态导入,确保 BASE_IP 的访问方式没有被异步操作阻碍,以致于导致 undefined

Logo

前往低代码交流专区

更多推荐