手機訪問電腦本地靜態頁面

如果用webstrom打開一個單獨的頁面，在瀏覽器中現實的地址是：

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

如果這恰好是你正在開發的用於移動端的頁面，想要在手機上訪問以便於測試驗證效果，怎么訪問到呢？
在webstorm的setting中是有相關可設置的，只是我試了不好用

下面有幾種辦法：
如果你已經安裝了全局的node.js，可以使用前兩種方法。

1、http-server

手機地址輸入電腦的ip加端口號8080即可訪問本地編寫的html頁面（確保手機跟電腦在同一個局域網下）

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即可訪問

作者：special_lily
鏈接：https://www.jianshu.com/p/112ccd34092a
來源：簡書