手机访问电脑本地静态页面

如果用webstrom打开一个单独的页面,在浏览器中现实的地址是:

http://localhost:63342/meipro-work/pages/active/findreset.html?_ijt=jhp5kumvugie2h6r0ublp089kf

如果这恰好是你正在开发的用于移动端的页面,想要在手机上访问以便于测试验证效果,怎么访问到呢?
在webstorm的setting中是有相关可设置的,只是我试了不好用

下面有几种办法:
如果你已经安装了全局的node.js,可以使用前两种方法。

1、http-server

npm install -g http-server
在站点目录下开启命令行输入http-server,运行结果如下:

Paste_Image.png

在浏览器中输入http://10.69.57.60:8080会访问meipro-work根目录下的页面,如果是子文件夹下的,修改相应路径就行了

2、browser-sync 文档说明

npm install -g browser-sync

安装成功后我们就可以在想要测试的文件目录下,在DOS窗口或者git bash输入:
browser-sync start --server --files "css/.css, .html",即可开启服务

Paste_Image.png

3、nginx

conf文件夹中名为nginx的配置文件,需要修改的地方有如下:

server {
        listen      80;
        server_name   localhost;

        location ~ ^([/\w-]+\.[/\w-]*)+$ {
            root   E:/mei/rootfile;
            index  index.html;
        }
}
需要注意的是1,2是在根文件夹中运行命令,3是root的值就是本文件夹的路径

4、如果想访问vue项目在npm run build之后生成的文件

可以使用如下server.js放到vue项目的根目录下

var express = require('express');
var app = express();

app.use('/static',express.static(__dirname + '/start/static'));

app.get('/', function(req, res){
  res.sendFile(__dirname+'/start/index.html');
});

var server = app.listen(8888, function(){
  var host = server.address().address;
  var port = server.address().port;

  console.log('App listening at http://%s:%s', host, port);
});

这样可以在浏览器中访问,输入localhost:8888即可
但是如果想使用域名,需要把端口号改成80,并配置host
例如:

127.0.0.1 console.jianshu.com

然后输入console.jianshu.com即可访问

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 124,478评论 18 136
  • 上一篇《WEB请求处理一:浏览器请求发起处理》,我们讲述了浏览器端请求发起过程,通过DNS域名解析服务器IP,并建...
    七寸知架构阅读 75,990评论 21 349
  • 《老男孩Linux运维》笔记 隐藏Nginx软件版本号 一般来说,软件的漏洞都和版本有关。因此要尽量隐藏对访问用户...
    Zhang21阅读 3,089评论 0 28
  • 第一章 Nginx简介 Nginx是什么 没有听过Nginx?那么一定听过它的“同行”Apache吧!Ngi...
    JokerW阅读 30,983评论 24 998
  • I/O模型Nginx介绍Nginx的安装和目录结构Nginx的配置Nginx的编译安装 一、I/O模型 (一)I/...
    哈喽别样阅读 526评论 0 4
  • 更多护肤知识添加junbaby1125
    小狮力气大阅读 85评论 0 0
  • 如果只能说言不由衷的话语。 请告诉我心脏存在的意义。 如果不被允许说真话,只能沉默以...
    未死知更鸟阅读 403评论 0 50
  • 前言 有些时候Xcode的警告过多,或者有些警告是多余的,可以使用#pragma clang diagnostic...
    BoomLee阅读 980评论 0 3