VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?

简介: VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?

传统方法(仅适用于普通项目):

1、在vscode中安装 Live Server 插件:

2、安装成功后,vscode右下角会有 Go Live 标识点击:

3、cmd ipconfig 查询自己电脑的ip地址:

4、复制地址替换端口前的地址(http://127.0.0.1:8080修改为http://192.168.2.100:8080),注意这是我的ip本地地址和端口号,读者别傻乎乎直接就复制过去了!

5、把地址发送到手机端,手机端点开即可预览,等待浏览器会自动打开,也可以用类似局域网访问(尤其是制作前端H5 web app等页面需要同时拿着手机进行联调的时候),这样我们就能像webstorm等IDE这样在本地方便的使用 ajax 或者 vue-resource 等功能。

粗暴方法(适用于vue项目):

打开config/index.js找到dev下面的host改成自己的本地IP

cnpm run dev

手机上就可以用http://192.168.2.100:

相关文章
|
7月前
|
弹性计算 定位技术 数据中心
阿里云服务器选择方法:配置、地域及付费模式全解析
2025阿里云服务器选购指南:就近选择地域以降低延迟,企业用户优选2核4G5M带宽u1实例,仅199元/年;个人用户可选2核2G3M带宽ECS,99元/年起。长期稳定业务选包年包月,短期或波动场景用按量付费,轻松搭建网站首选高性价比配置。
|
8月前
|
弹性计算 运维 分布式计算
阿里云服务器付费模式选择:节省计划、预留实例券、抢占式实例详解
在我们选购阿里云服务器的时候,有多种计费方式可选,其中包年包月和按量付费是用户最熟悉也是选择最多的计费方式,除了这两种方式之外,阿里云还提供了抢占式实例、节省计划、预留实例券三种更为灵活且经济的付费模式,旨在满足不同业务场景下的长周期低成本与短周期高弹性需求,有的新手用户朋友不清楚这三种计费方式是什么,本文将为大家解析这三种付费模式的内在机制、优势对比及适用场景,以供您选择参考。
|
9月前
|
安全
基于Reactor模式的高性能服务器之Acceptor组件(处理连接)
本节介绍了对底层 Socket 进行封装的设计与实现,通过 `Socket` 类隐藏系统调用细节,提供简洁、安全、可读性强的接口。重点包括 `Socket` 类的核心作用(管理 `sockfd_`)、成员函数的功能(如绑定地址、监听、接受连接等),以及 `Acceptor` 组件的职责:监听连接、接收新客户端连接并分发给上层处理。同时说明了 `Acceptor` 与 `EventLoop` 和 `TcpServer` 的协作关系,并展示了其成员变量和关键函数的工作机制。
205 2
|
9月前
|
弹性计算 关系型数据库 Nacos
低配阿里云 ECS 如何 docker 环境部署 NACOS : 单机版模式
NACOS 单机版 Docker 安装指南。使用指定端口和 custom.env 配置文件启动 Nacos 服务,适用于 2.X 版本,包含 gRPC 支持及 MySQL 数据源配置。 -e MODE=standalone \
723 5
|
存储 弹性计算 资源调度
阿里云服务器收费模式对比:包年包月与按量付费的适用场景与选择参考
在我们购买阿里云服务器的时候,云服务器的收费模式主要有多种收费模式,其中包年包月和按量付费两种主流模式。对于准备在阿里云上部署应用的用户来说,选择合适的收费模式至关重要,因为它直接关系到成本控制和资源使用的灵活性。本文将对这两种收费模式做一个对比,以供参考和选择。
1443 14
|
开发工具 git
vscode推送项目到github仓库故障解决1
本文介绍了如何优雅解决本地仓库与远程仓库历史记录不一致的问题,并提供避免未来问题的最佳实践。核心在于理解问题根源(如历史记录差异和常见原因),采用推荐的解决方案(先本地初始化再关联远程仓库),并遵循一致的工作流程、团队协作规范及熟悉 Git 命令。通过强制推送或合并无关历史记录等方式处理现有冲突,同时养成良好习惯以预防类似问题。
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
2234 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
人工智能 自然语言处理 前端开发
VSCode AI提效工具,通义灵码前端开发体验
通义灵码2.0是一款强大的VS Code插件,安装简便,图标易记。其亮点包括接入deepseek-v3/r1模型,支持智能问答、AI编程、代码优化及贴图提问;多语言和编辑器支持;个性化使用满足不同需求。个人版完全免费,节省12%开发时间。对比1.0版本,2.0在功能实现上更加完善,尤其在前端项目中表现出色,根据需求描述生成完整项目结构和详细代码,极大提升开发效率。
1154 0
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
394 10
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
654 8

热门文章

最新文章

下一篇
开通oss服务