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:

相关文章
|
17天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
1月前
|
SQL 弹性计算 安全
购买阿里云活动内云服务器之后设置密码、安全组、增加带宽、挂载云盘教程
当我们通过阿里云的活动购买完云服务器之后,并不是立马就能使用了,还需要我们设置云服务器密码,配置安全组等基本操作之后才能使用,有的用户还需要购买并挂载数据盘到云服务器上,很多新手用户由于是初次使用阿里云服务器,因此并不知道这些设置的操作流程,下面给大家介绍下这些设置的具体操作流程。
购买阿里云活动内云服务器之后设置密码、安全组、增加带宽、挂载云盘教程
|
1月前
|
网络协议 Shell 网络安全
实验目的1.编译安装httpd2.优化路径3.并将鲜花网站上传到web服务器为网页目录4.在客户机访问网站http://www.bdqn.com
实验目的1.编译安装httpd2.优化路径3.并将鲜花网站上传到web服务器为网页目录4.在客户机访问网站http://www.bdqn.com
163 0
|
19天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
79 0
|
9天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
13天前
|
JavaScript
VSCode 开发 Vue 语法提示
VSCode 开发 Vue 语法提示
|
28天前
|
前端开发 数据可视化 搜索推荐
数据驱动的前端设计与开发实践
本文将介绍如何在前端设计与开发中充分利用数据驱动的方法,通过数据分析、用户行为追踪和可视化等手段,指导前端界面设计和功能开发,提高用户体验和产品质量。
|
30天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。
|
30天前
|
JavaScript 前端开发 应用服务中间件
通过域名的方式访问服务器里的资源
通过域名的方式访问服务器里的资源
20 0
|
1月前
|
弹性计算 监控
ecs合理设置CPUCredits
阿里云ECS的Burstable实例使用CPU Credits管理额外计算能力。监控应用负载以评估CPU需求,选择合适实例类型,优化工作负载分配,确保 Credits 累积与消耗平衡。当Credits不足时,可升级实例或调整工作负载。关注阿里云最新文档以获取准确操作指南。
22 3