600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 手机加载电脑html 手机访问电脑本地html文件

手机加载电脑html 手机访问电脑本地html文件

时间:2020-09-05 01:35:02

相关推荐

手机加载电脑html 手机访问电脑本地html文件

如果用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

然后输入即可访问

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。