webstorm配置本地服务和局域网联机测试

来源:程序思维浏览:1358次
我在网上找了很多教程,都写得不够全面,于是我亲自经过多次试验,试验出来了,现在分享给大家,另外我用的版本是webstorm 2018.3,我们一起看下面的配置一流程:

1.首先需要配置你的端口号并允许服务被外部访问

  操作顺序:

  ① 点击左上角“ file(文件)”

  ②点击Settings(设置),弹窗设置窗口

  ③ 在弹窗左侧上方搜索框搜索“deployment” ,从左侧菜单中找到“Debugger” ,点击选择, 当然也可以直接搜索“debugger”来查找,我这只是方便下一步操作。

  ④点击弹窗左侧菜单中“debugger”

  ⑤输入要配置的端口号,(按端口号定义规则,8080其他软件用的太多,怕冲突我这用的是8888)

  ⑥勾选 can accept external connections  (可以接受外部连接)

  ⑦应用配置

File -> settings -> Debugger -> port:8888 -> 勾选 can accept external connections –> apply.

2、部署环境

  操作顺序:

  ①点击弹窗左侧菜单中“Deployment”

  ②点击弹窗中间上方的“+”号,弹出小弹窗

  ③ 在Name处 填写服务器名称(我这写的是qs,可以自定义你的服务器名称)

  ④在Type处点击下拉选择服务器类型为 “Local or mounted folder”

  ⑤点击ok  (小弹窗自动关闭出现项目设置在界面,详细操作看下图↓↓↓↓↓↓↓↓)

Deployment -> ”+” -> name -> Type -> ok 

3、获取本地ip地址

操作顺序:

  ①按键盘“窗口” + R 键  弹出运行弹窗

  ②在运行弹窗 输入"cmd"

  ③ 点击确定,弹出DOS窗口

  ④在DOS窗口中输入“ipconfig” 按回车

  ⑤在查询到的列表中找到 自己的ip ,记录下来,后面用。

运行 -> cmd  -> ipconfig 

4.设置项目路径

操作顺序:

  ①切换"Connection" 为当前页签(默认单签就是该页签)

  ②在Folder处,设置项目的文件路径,可以点输入框后面的三个点选择

  ③ 在Web server root URL处  填写本机ip地址加端口号(格式:http://172.17.11.133:8081)如果是本地服务http://localhost:8081。

  ④切换"Mappings" 为当前页签

  ⑤在Local path处,检查项目路径是否正确,不正确可以点输入框后面的三个点重新选择

  ⑥服务器上的部署路径(此处为相对路径,如果只是本地起个项目可以不用管,但是不填会提示,于是可以填‘\qs’);

  ⑦在 Web path on server 'xxx' 处、填写项目最后一级文件名称

  (这个地方很重要,填错访问就会出现  “404 Not Found”,我们以我的例子说明,这是我的项目路径  “D:\work_test\qs”,那么这个地方就应填‘/qs’)

  ⑧点击应用

  ⑨点击 OK  (详细操作看下图↓↓↓↓↓↓↓↓)

Folder-> Web server root URL  ->  Web path on server 'xxx'  -> apply ->ok

5、访问

打开你的文件比如index.html文件

你安装的哪个浏览器,就会显示在右上角,直接点击就可以访问了。
精品好课
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
收藏
扫一扫关注我们