vue3项目如何配置能显示局域网之内的ip网址

在Vue 3项目中,如果你想要配置项目使其可以通过局域网内的IP地址被访问,通常需要修改开发服务器的配置,使其监听所有网络接口。下面是如何进行配置的步骤:

  1. 修改vue.config.js文件: 首先,确保你的项目根目录下有一个vue.config.js配置文件。如果没有,你需要创建一个。在这个文件中,你可以指定开发服务器的配置选项。

  2. 配置devServer: 在vue.config.js文件中,你可以通过devServer属性来配置开发服务器。要使项目能够通过局域网内的IP地址访问,你需要设置host0.0.0.0。这样,开发服务器将监听所有网络接口。

以下是一个配置示例:

module.exports = {devServer: {host: '0.0.0.0',port: 8080, // 可选,如果你想指定一个不同的端口public: '你的局域网IP:端口', // 可选,帮助开发服务器确定被访问的URLdisableHostCheck: true, // 可选,绕过主机检查,不推荐生产环境中使用},
};
  1. 查找你的局域网IP地址: 你需要知道你的电脑在局域网内的IP地址。这可以通过在命令行中运行ipconfig(Windows)或ifconfig(macOS/Linux)命令来查找。你应该找到一个类似于192.168.x.x的地址。

  2. 运行你的Vue项目: 使用命令npm run serveyarn serve启动你的开发服务器。

  3. 通过局域网IP访问: 现在,你的Vue项目应该可以通过局域网内的任何设备访问了。只需在设备的浏览器中输入步骤3中找到的IP地址和你在配置中指定的端口号(例如192.168.1.2:8080)。

确保你的防火墙设置允许通过指定的端口进行通信,这样局域网内的其他设备才能访问你的项目。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

【LeetCode】每日一题:使二叉树所有路径值相等的最小代价

该题采用自底向上的思路的话,很容易想到使用贪心的思想,但是如何进行具体操作却有些难度。 这里补充一个重要的结论:二叉树的数组形式中,第i个节点的父节点是i/2;接下来只需要让自底向上让每个路径上的代价保持最低限…

互联网加竞赛 机器视觉目标检测 - opencv 深度学习

文章目录 0 前言2 目标检测概念3 目标分类、定位、检测示例4 传统目标检测5 两类目标检测算法5.1 相关研究5.1.1 选择性搜索5.1.2 OverFeat 5.2 基于区域提名的方法5.2.1 R-CNN5.2.2 SPP-net5.2.3 Fast R-CNN 5.3 端到端的方法YOLOSSD 6 人体检测结果7 最后 0 前言 &#x1f5…

Ubuntu20.04 (VMware 虚拟机) fdisk -l 权限不够的解决办法

磁盘容量扩展时候,输入fdisk -l命令时,提示无权限, 这个时候考验耐心的时候到了! 第一步: 输入su root 第二部: 然后输入root管理员账户密码 如果不知道密码的话,看第三步 第三步&#xf…

后端程序员入门react笔记(六)- 讲透Promise与Fetch

js声明变量的三种方式 我们通常使用 var let 和const来声明js的变量,但是这三者有什么区别呢? var的变量可以是全局的或者函数作用域,而let和const只能是块级作用域var和let可以重新赋值,而const是不允许重新赋值的,…

Linux课程四课---Linux开发环境的使用(vim编辑器的相关)

作者前言 🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂 ​🎂 作者介绍: 🎂🎂 🎂 🎉🎉&#x1f389…

常见漏洞的流量特征

1、SQL注入漏洞 查看url / Referer字段/User-Agent字段/cookie字段 出现一些特殊字符(eg:单引号【‘】、双引号【“”】、括号【()】、单引号括号【‘(】、双引号括号【“(】等一些常见的特殊的字符&#…

改进的yolo交通标志tt100k数据集目标检测(代码+原理+毕设可用)

YOLO TT100K: 基于YOLO训练的交通标志检测模型 在原始代码基础上: 修改数据加载类,支持CoCo格式(使用cocoapi);修改数据增强;validation增加mAP计算;修改anchor; 注: 实验开启weig…

HUAWEI 华为交换机 配置基于VLAN的MAC地址学习限制接入用户数量 配置示例

组网需求 如 图 2-15 所示,用户网络 1 通过 LSW1 与 Switch 相连, Switch 的接口为 GE0/0/1 。用户网络2通过 LSW2 与 Switch 相连, Switch 的接口为 GE0/0/2 。 GE0/0/1 、 GE0/0/2 同属于 VLAN2。为控制接入用户数,对 VLAN2 进…

蓝桥杯 最多约数

242*2*2*3&#xff08;质因子&#xff09;&#xff0c;约数&#xff08;11&#xff09;*&#xff08;11&#xff09;*&#xff08;11&#xff09;*&#xff08;11&#xff09;8 #include <bits/stdc.h> using namespace std; int main(){int a[700]{393353, 901440, 1234…

【React 报错】—Remove untracked files, stash or commit any changes, and try again.

【React 报错】—Remove untracked files, stash or commit any changes, and try again. 在react项目中通过.less文件进行样式定义&#xff0c;先暴露webpack配置文件&#xff0c;执行命令&#xff1a;yarn eject 或 npm run eject&#xff0c;报错如下&#xff1a; 原因是因…

第七十天 APP攻防-微信小程序解包反编译数据抓包APK信息资源提取

第70天 APP攻防-微信小程序&解包反编译&数据抓包&APK信息资源提取 知识点&#xff1a; 0、APK信息资源提取 1、微信小程序致据抓包 2、做信小程序解包反编译 1、信息收集应用8资产提取&权限等 2、漏润发现-反编泽&脱壳&代码审计 3、安全评估组件8散密…

李沐动手学习深度学习——3.2练习

以下是个人理解&#xff0c;希望进行讨论求解。 练习 1. 如果我们将权重初始化为零&#xff0c;会发生什么。算法仍然有效吗&#xff1f; 根据SGD算法公式如上&#xff0c;第一次迭代的值可知w只与b相关&#xff0c;而对于b的迭代更新&#xff0c;只是与b的初始值相关&#x…

【机器学习】线性回归模型(Linear Regression)

&#x1f338;博主主页&#xff1a;釉色清风&#x1f338;文章专栏&#xff1a;机器学习&#x1f338;今日语录:温柔的一半是知识&#xff0c;没有知识的涵养撑不起你想要的风骨。 ☘️0文章预览 本系列文章主要是根据吴恩达老师的机器学习课程以及自己的理解整合而成&#xf…

自动化操作读写Excel —— xlrd 和 xlwt 模块参数说明与代码实战【第95篇—自动化操作读写Excel 】

自动化操作读写Excel —— xlrd 和 xlwt 模块参数说明与代码实战 在日常工作中&#xff0c;Excel表格是不可或缺的数据处理工具。为了提高工作效率&#xff0c;Python中的xlrd和xlwt模块为我们提供了强大的功能&#xff0c;使得自动化操作Excel变得更加简便。本文将介绍xlrd和…

npm 最新淘宝镜像配置 + nrm工具配置及使用

一、前言 npm 淘宝镜像已经从 registry.npm.taobao.org 切换到了 registry.npmmirror.com &#xff08;HTTPS 证书到期不能用了&#xff09; 二、直接命令配置 1、执行以下命令即可切换淘宝源 npm config set registry https://registry.npmmirror.com/2、执行以下命令即可…

重拾前端基础知识:JavaScript

重拾前端基础知识&#xff1a;JavaScript 前言使用JavaScript输出语法运算符条件语句循环数据类型字符串数字数组对象日期函数 数学正则表达式异常处理类集合模块JSON闭包异步调试DOM&#xff08;文档对象模型&#xff09;事件事件监听器表单 BOM&#xff08;浏览器对象模型&am…

基于vue的图书管理系统的设计与实现

高校师生在教学中承受的压力越大就对知识拥有了更多的需求&#xff0c;而满足这一需求的最佳场所无疑就是图书馆。当前虽然信息技术在各个方面都发挥出重要作用&#xff0c;但是在相当多的高校图书馆中依然由工作人员手动完成图书借阅、归还及逾期提醒等所有工作&#xff0c;在…

03OpenCV图像的掩膜操作

文章目录 掩膜操作提高图像的对比度获取图像像素制作图像掩膜算子防止像素溢出算子全部代码 掩膜操作提高图像的对比度 红色是中心像素&#xff0c;从上到下&#xff0c;从左到右对每个像素做同样的处理操作&#xff0c;得到最终结果就是对比度提高之后的输出图像Mat对象 注&am…

【全志D1-H 哪吒开发板】Debian系统安装调教和点灯指南

全志D1-H开发板【哪吒】使用Deabian系统入门 特别说明&#xff1a; 因为涉及到操作较多&#xff0c;博文可能会导致格式丢失 其中内容&#xff0c;会根据后续使用做优化调整 目录&#xff1a; 参考资料固件烧录启动调教点灯问题 〇、参考资料 官方资料 开发板-D1开发板【…

NLP-词向量、Word2vec

Word2vec Skip-gram算法的核心部分 我们做什么来计算一个词在中心词的上下文中出现的概率&#xff1f; 似然函数 词已知&#xff0c;它的上下文单词的概率 相乘。 然后所有中心词的这个相乘数 再全部相乘&#xff0c;希望得到最大。 目标函数&#xff08;代价函数&#xff0…