在这里插入图片描述

今天遇到了2个小问题:1.想在手机运行VSCode上写好的网页代码。2.同样在手机运行VS2022 WebApi生成网页查找了一晚上资料,终于动手解决了,记录于此。

一.手机预览VSCode生成网页站点

  1. 首先保证手机(Android和IOS均可以)和电脑在同一个局域网络,即将手机电脑连接在同一个无线网络即可
  2. 在VSCode下载一个名为Live Server插件,如下图
    在这里插入图片描述
  3. 在VSCode中写一个html页面,并用Live Server打开,如下图
    在这里插入图片描述

在这里插入图片描述

127.0.0.1一般为电脑本地IP,因此要想在手机打开电脑上网页,需要让手机知道电脑的IPV4地址,以本电脑为例,用cmd输入ipconfig命令发现电脑IP为192.168.0.105,如下图

在这里插入图片描述

此时把127.0.0.1换成电脑IP为192.168.0.105即可

最终在手机浏览器运行网址192.168.0.105:5500/index.html即可预览网页,如下图

在这里插入图片描述

二.手机端预览VS2022生成的 WebApi网页站点

  1. 首先创建一个WebApi项目运行,如下图
    在这里插入图片描述
    两个网址将是我们等会要在手机上访问的。

  2. 在VS2022中下载一个名为Conveyor插件,该插件获取由IIS部署的WebService的IP (运行IIS),视频使用教程为:

    如何在手机上打开Vs2022中生成的webapi网页

  1. 我们直接用手机浏览器打开插件生成的远程url即可访问电脑网页了,如下图
    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述

三.手机端预览VS2022生成的 vueapp前端

比如我要用VS2022新建一个Vueapp前端和WebApi后端结合工程,如下图
在这里插入图片描述

在这里插入图片描述
那么如何在手机端显示vueapp.clinent1中的网页呢?

  1. 首先将电脑和手机连接在同一个局域网络,然后修改package.json中的内容dev”: “vite”, 修改dev”: “vitehost 0.0.0.0”, 如下图:
    在这里插入图片描述
  2. 右键单击Vuepp项目,并在终端中打开,在控制台输入num run dev,直到出现下面页面
    在这里插入图片描述
    红色矩形圈中的就是我们可以在手机浏览器中输入的IP,此时就可以在手机上访问电脑端网页了,
    如下图:
    在这里插入图片描述

四.总结

网上好多教程说说要关闭Windows防火墙,其实不需要。上述一和二中的Liver Server插件和Conveyor插件已经默认我们后台配置防火墙中的入站规则了,我们可以通过查看控制面板->系统安全->Windows Defender防火墙->高级设置->入站规则查看这2个插件自动我们配置的可允许远程访问的站点,如下图:

在这里插入图片描述
在这里插入图片描述

原文地址:https://blog.csdn.net/weixin_48239221/article/details/134654437

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_23834.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注