• 在webstorm中配置本地服务器-局域网内其他设备访问(移动端手机访问测试等)


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

    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)

      ④切换"Mappings" 为当前页签

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

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

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

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

      ⑧点击应用

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

       

       

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

    5.访问

        操作顺序:

        在浏览器输入我们刚刚配置好的路径就可以访问了, 手机也一样(其他电脑及手机访问需要在同一个网段里面)。

        

  • 相关阅读:
    操作系统__kali(1)基本操作指令,以及常用工具
    Log4net入门(回滚日志文件篇)
    Log4net入门(日志文件篇)
    Log4net入门(控制台篇)
    openwrt控制GPIO
    openwrt DTS介绍
    openwrt bin文件解析
    STM32(三十)蓝牙通信
    openwrt的led configuration
    uci文件生成脚本函数说明
  • 原文地址:https://www.cnblogs.com/ysxq/p/10266028.html
Copyright © 2020-2023  润新知