如何本地局域网下访问vue项目?【手机和电脑均可】

news/2024/7/10 0:35:34 标签: vue, java, 局域网

在学习vue的时候,在电脑上跑起来,总喜欢还能在别的电脑或者自己手机上能看见,这就需要小小的配置一下

win10设置

需要配置一下电脑的防火墙,把所需的端口(如:8080)打开。

设置方法如下:

  1. Windows 10 ,搜索“控制面板”,打开,Windows 7 可以直接在开始菜单打开。

  2. 点击“Windows Defender防火墙”——“高级设置”——新建“入网规则”。
    在这里插入图片描述

  3. 规则类型选择“端口”

在这里插入图片描述

  1. 下一步“特定本地端口”填 8080-8088 (此处是一个 IP 段,因为如果打开多个项目,端口会被占用, Vue会自动分配一个新的端口。如:8081 )。
    在这里插入图片描述

  2. 下一步“允许连接”

  3. 下一步选择开放的场景,注意一定要选前两个

在这里插入图片描述

  1. 下一步输入规则名称,点击“完成”即可

在这里插入图片描述

这样用手机访问电脑 IP 加端口号,192.168.1.11:8080 就可以打开项目了。

注意:手机和电脑必须在同一局域网下才能访问,同事电脑同理

获取IP 方法:

打开命令提示行工具,输入 ipconfig 回车, 就可以看到自己的IP了,比如我的 192.168.2.103 。

Vue项目无法使用局域网IP直接访问的配置方法 经验总结 第3张

这样更加方便真机调试,无需部署到服务器就可以进行访问和测试。

**注意:**如果项目使用的是笔记本启动的,而且还是连的WiFi,那么需要访问的ip应该是无线IP
在这里插入图片描述
其实在npm run serve启动vue项目的时候,控制台就有显示网络访问的IP地址,复制访问即可。
在这里插入图片描述


http://www.niftyadmin.cn/n/1689247.html

相关文章

Qt(X):控件操作

LineEdit(条形文本框) int i ui->x_but->text().toInt()ui->y_but->text().toInt()//获取文本框字符且转数字;QString qs QString::number(i)//数字转字符;ui->result->setText(qs)//显示;

navicat连接报错:Authentication plugin ‘caching_sha2_password‘ cannot be loaded的处理方法

今天使用Navicat12连接数据库,输入root密码后出现2059 - Authentication plugin ‘caching_sha2_password’ cannot be loaded报错,找了半天原因是MySQL8之前和之后的加密规则不同导致的,现在来处理这个问题。 1.打开MySQL的命令行&#xff…

IDEA设置代码提示

设置步骤: fiel-settings ,找到code completion需要设置的我都打上红框了,照着弄就行 最后说明一下,虽然都说程序员是面向搜索引擎编程,这是因为很多常见的错误,很多人都已经遇到过了,遇到bu…

VUE使用sessionStorage存取对象时会显示[object object]的解决方法

VUE如果直接使用window.sessionStorage.setItem和window.sessionStorage.getItem来进行存取对象的话,不能正常使用该对象,并且在Application的Session Storage中会显示[object object]。 window.sessionStorage.setItem("user",res.data.user…

ResultMap和ResultType在使用中的区别

ResultMap主要用于单表查询&#xff0c;方便快捷&#xff1a; <select id"checkUser" resultMap"com.wyh.springbootmybatisdemo.pojo.SportUser">select * from easyuser ;</select>这里的com.wyh.springbootmybatisdemo.pojo.SportUser就是写…

使用teleport ultra爬取网站源码

有时候看到好看的网站总想爬取下来玩一玩&#xff0c;模仿一下&#xff0c;这里介绍一个好用的工具teleport ultra 下载链接&#xff1a;teleport ultral 下载之后&#xff0c;安装&#xff0c;注意安装的时候把默认勾选的推广软件取消了&#xff01; 爬取步骤&#xff1a; …

@RequestParam和@RequestBody使用上的区别

只讲最直接和使用上的区别&#xff0c;深层的差异请移步百度 RequestParam 服务器端&#xff0c;需要把每个参数都写出来&#xff1a; RequestMapping("/updatestate")public String updateUserState(RequestParam("id")int id,RequestParam("state…

【第三天】变量,常量,数据类型

一、常量和变量 变量的定义&#xff0c;变量就是用来存储特定类型的数据。 变量的命名规则 1、变量名只能由数字&#xff0c;字母和下划线组成。 2、变量名的第一个字符只能是字母或下划线&#xff0c;不能是数字。 3、不能使用c#中的关键字作为变量名 4、一旦带一个语句块中…