配置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

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

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

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/78686.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【修复】centos定时任务python top不能输出

问题 用python监控进程占用硬件资源时&#xff0c;手动执行正常运行&#xff0c;定时任务执行出错 在centos的定时任务中&#xff0c;用python的os模块执行top命令时终端没有输出 cmd top -d 1 -n 1 -p {} | grep -E "PID|{}|%Cpu|buff/cache" .format(process_id…

JavaScript中var,let,const 的区别

JavaScript中var&#xff0c;let&#xff0c;const 的区别 一、前言二、使用var声明变量1、var 声明的变量是函数作用域2、var声明的变量会有变量提升3、全局作用域中声明的变量会被挂载到全局对象的window中4、同一作用域下&#xff0c;可以重复声明相同的变量名 三、使用let声…

Unity下如何实现RTMP或RTSP播放端录像?

好多开发者问我们&#xff0c;Unity环境下&#xff0c;除了RTSP或RTMP的播放&#xff0c;如果有录像诉求&#xff0c;怎么实现&#xff1f;实际上录像相对播放来说&#xff0c;更简单一些&#xff0c;因为不涉及到绘制&#xff0c;只要拉流下来数据&#xff0c;直接写mp4文件就…

云原生Kubernetes:pod资源管理与配置

目录 一、理论 1.pod 2.pod容器分类 3.镜像拉取策略 4.pod 的重启策略 二、实验 1.Pod容器的分类 2.镜像拉取策略 三、问题 1.apiVersion 报错 2.pod v1版本资源未注册 3.格式错误 4.取行显示指定pod信息 四、总结 一、理论 1.pod (1) 概念 Pod是kubernetes中…

【LeetCode-中等题】78. 子集

文章目录 组合并集问题汇总&#xff1a;题目方法一&#xff1a;动态规划方法二&#xff1a;递归加回溯(关键----startIndex) 组合并集问题汇总&#xff1a; 1、子集去重版本 2、组合非去重版本 3、组合去重版本 题目 注意&#xff1a;这里的nums数组里面的元素是各不相同的&a…

(文末赠书)我为什么推荐应该人手一本《人月神话》

能点进来的朋友&#xff0c;说明你肯定是计算机工作的朋友或者对这本书正在仔细琢磨着的朋友。 文章目录 1、人人都会编程的时代&#xff0c;我们如何留存?2、小故事说明项目管理着为什么必看这本书3、如何评价《人月神话&#xff1a;纪念典藏版》4、本书的目录&#xff08;好…

【操作系统】进程的通信IPC

进程通信是指进程之间的信息交换。 低级通信方式&#xff1a;PV操作 高级通信方式&#xff1a;1.共享存储2.消息传递3.管道通信 共享存储 低级数据结构共享&#xff0c;高级存储区共享。 对共享空间进行读写操作时&#xff0c;需要用到互斥工具。 消息传递 利用发送消息和…

如何选择安全稳定的大文件传输软件平台,企业传输必看

在当今的信息时代&#xff0c;大文件传输是企业间合作、项目交付、数据备份等场景中不可或缺的需求。然而&#xff0c;大文件传输也面临着诸多挑战&#xff0c;比如速度慢、不稳定、不安全等&#xff0c;给企业带来了不少困扰和风险。那么&#xff0c;如何选择一款安全稳定的大…

自然语言处理应用(一):情感分析

情感分析 随着在线社交媒体和评论平台的快速发展&#xff0c;大量评论的数据被记录下来。这些数据具有支持决策过程的巨大潜力。 情感分析&#xff08;sentiment analysis&#xff09;研究人们在文本中 &#xff08;如产品评论、博客评论和论坛讨论等&#xff09;“隐藏”的情…

echarts静态饼图

<div class"cake"><div id"cakeChart"></div></div> import * as echarts from "echarts";mounted() {this.$nextTick(() > {this.getCakeEcharts()})},methods: {// 饼状图getCakeEcharts() {let cakeChart echart…

『力扣每日一题07』字符串最后一个单词的长度

气死我啦&#xff0c;今天这道题花了快一个小时&#xff0c;我学完了答案的解法&#xff0c;放上去在线 OJ &#xff0c;一直报错&#xff0c;找来找去都找不到自己错在哪&#xff0c;明明跟答案一模一样。后来还是学了另一种解法&#xff0c;才跑出来的(̥̥̥̥̥̥̥̥o̥̥…

UE5 Foliage地形植被实例删不掉选不中问题

目前问题测试发生在5.2.1上 地形上先填充后刷的植被删不掉 首先这个就是bug&#xff0c;大概看到说是5.3上能解决了&#xff0c;对此我只能吐槽ue5上地形植被bug太多了 什么nanite还能产生bug&#xff0c;不过这次又不是&#xff0c;整个删掉instance可以删除所有植被&#…

【踩坑纪实】URL 特殊字符 400 异常

URL 特殊字符 400 异常 笔者之前在写后端或者前端时&#xff0c;在处理表单时&#xff0c;经常有对特殊字符的检验处理&#xff0c;但自己也不清楚为什么要这么做&#xff0c;浅浅地以为可能是特殊字符不好看或者存取可能会造成异常&#xff1f;不过一直没遇到过问题&#xff…

uniapp微信小程序《隐私保护协议》弹窗处理流程

背景 《关于小程序隐私保护指引设置的公告》 《小程序隐私协议开发指南》 流程 1.第一步 必须设置且审核通过&#xff01;&#xff01;&#xff01; 2.第二步 uniapp在manifest.json中添加&#xff01;&#xff01;&#xff01; /* 在 2023年9月15号之前&#xff0c;在 ap…

玩转Mysql系列 - 第14篇:详解事务

环境&#xff1a;mysql5.7.25&#xff0c;cmd命令中进行演示。 开发过程中&#xff0c;会经常用到数据库事务&#xff0c;所以本章非常重要。 本篇内容 什么是事务&#xff0c;它有什么用&#xff1f; 事务的几个特性 事务常见操作指令详解 事务的隔离级别详解 脏读、不可…

Dockerfile 制作常用命令总结

1.FROM( from ) : FROM : from 表示选择一个镜像作为基础镜像&#xff08;在一个Dockerfile 中可以使用多条from&#xff0c;来构建多个镜像&#xff09; 2.ENV &#xff1a; 用来在镜像创建出的容器中声明环境变量&#xff0c;如&#xff1a; ENV PYTHONIOENCODINGutf-8 …

Leetcode算法入门与数组丨3. 数组基础

文章目录 前言1 数组简介2 数组的基本操作2.1 访问元素2.2 查找元素2.3 插入元素2.4 改变元素2.5 删除元素 3 总结task03task04 前言 Datawhale组队学习丨9月Leetcode算法入门与数组丨打卡笔记 这篇博客是一个 入门型 的文章&#xff0c;主要是自己学习的一个记录。 内容会参…

SSM SpringBoot vue快递柜管理系统

SSM SpringBoot vue快递柜管理系统 系统功能 登录 注册 个人中心 快递员管理 用户信息管理 用户寄件管理 配送信息管理 寄存信息管理 开发环境和技术 开发语言&#xff1a;Java 使用框架: SSM(Spring SpringMVC Mybaits)或SpringBoot 前端: vue 数据库&#xff1a;Mys…

【GAMES202】Real-Time Ray Tracing 1—实时光线追踪1

一、前言 这篇我们开始新的话题—Real-Time Ray Tracing简称RTRT&#xff0c;也就是实时光线追踪&#xff0c;关于光线追踪&#xff0c;我们已经不止一次提到过它的优点&#xff0c;无论是软阴影还是全局光照&#xff0c;光线追踪都很容易做&#xff0c;唯一的缺点就是速度太慢…

超简单免费转换ape到flac

1. 安装最新版的ffmpeg 2. 安装cywin环境 3. 设置path到ffmpeg export PATH$PATH:"PATH/TO/FFMPEG/BIN" 4.到ape所在的目录&#xff0c;执行以下命令 find . -iname "*.ape" | while read line; do fb${line::-4}; fn"$fb.flac";echo ffm…