配置Vite获取内网IP(Vue3项目​ts版本获取本机局域网IP地址)

2023-09-14 10:19:41

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

更多推荐

正则表达式相关概念及不可见高度页面的获取

12.正则概念:匹配有规律的字符串,匹配上则正确1.正则的创建方式构造函数创建//修饰符igm//i忽视ignore//gglobal全球全局//m换行varreg=newRegExp("匹配的内容","修饰符")varstr="thisisaBox";varreg=newRegExp("box","igm");con

win10系统 C++环境 安装编译GRPC

第一步下载源码、更新、cmake编译:为了依赖的成功安装,采用gitee进行下载与更新。记得需要安装git软件。安装命令:在自己指定的目录下,鼠标右键,选择gitBashHere打开命令行gitclone-bv1.34.0https://gitee.com/mirrors/grpc-framework.gitgrpc在

java中集合的List

集合的List可以存储重复元素以下情况使用ArrayList:频繁访问列表中的某一个元素。只需要在列表末尾进行添加和删除元素操作。以下情况使用LinkedList:你需要通过循环迭代来访问列表中的某些元素。需要频繁的在列表开头、中间、末尾等位置进行添加和删除元素操作。一.ArrayList可以保存重复元素,底层是数组实

runtime过程中,常见jar问题解决

sourcedownloadIntellijIDEA有时候不下载不了code,使用如下命令,在“terminal”下运行mvndependency:resolve-Dclassifier=sourcesio.nettyjava.lang.NoSuchMethodError:io.netty.buffer.PooledB

四、C#—变量,表达式,运算符(2)

🌻🌻目录一、表达式1.1什么是表达式1.2表达式的基本组成二、运算符2.1算术运算符2.1.1使用/运算符时的注意事项2.1.2使用%运算符时的注意事项2.2赋值运算符2.2.1简单赋值运算符2.2.2复合赋值运算符2.3关系运算符2.4逻辑运算符2.4.1逻辑运算符的使用场合2.4.2逻辑运算符的规则2.4.3&

[python 刷题] 49 Group Anagrams

[python刷题]49GroupAnagrams题目:Givenanarrayofstringsstrs,grouptheanagramstogether.Youcanreturntheanswerinanyorder.AnAnagramisawordorphraseformedbyrearrangingthelet

界面控件DevExpress WinForms HTML-CSS模板:预设计UI模板加速.NET应用开发

在过去的一年里,DevExpress官方引入了两个强大的功能来加速/简化.NET桌面应用的开发,当一起使用时,您可以创建优雅/个性化的用户界面,减少重复的代码,从而节省更多的项目时间。DevExpressWinForms有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。同时能完美构建

Linux线程之信号量(semaphore)

Linux信号量1.头文件2.类型2.1.类型值3.接口3.1.信号量接口3.1.1动态初始化资源3.1.2.动态释放资源3.1.3.信号量锁定3.1.4.带超时时间的信号量锁定3.1.5.不阻塞信号量锁定3.1.6.信号量解锁3.1.6.获取当前信号量的值4.示例4.1.信号量示例1.头文件#include<sema

Linux Day15:线程安全

一、线程安全方法线程安全即就是在多线程运行的时候,不论线程的调度顺序怎样,最终的结果都是一样的、正确的。那么就说这些线程是安全的。要保证线程安全需要做到:1)对线程同步,保证同一时刻只有一个线程访问临界资源。(信号量,互斥锁,读写锁,条件变量)2)在多线程中使用线程安全的函数(可重入函数),所谓线程安全的函数指的是:如

Linux动态库

定义:动态函数库,是在程序执行时动态(临时)由目标程序去调用优点:调用时不复制,程序运行时动态加载到内存,供程序调用,系统只加载一次,多个程序可以共用,节省内存。程序升级简单,因为app里面没有库的源代码,升级之后只要库的名字不变,函数名以及参数不变,只是实现做了优化,就能加载成功。缺点:加载速度比静态库慢,占用内存大

《动手学深度学习》(pytorch版+mxnet版)2023最新

我又来推书了,这次分享的这本书可是重量级,目前已经被55个国家300所大学用于教学,同时受到了学术界与工业界的强烈推荐。这本书就是李沐、阿斯顿·张、立顿、斯莫拉四位大佬联合编写的《动手学深度学习》。本书面向中文读者,能运行、可讨论,适合本科生、研究生、工程师以及研究人员学习。书籍pdf文末获取书籍介绍全书采用公式+图示

热文推荐