开发h5项目通过ip连接到手机上访问

保证手机和电脑在同一个局域网下，用手机访问自己电脑的ip地址

一、vue项目：在package.json中添加--host 自己的电脑ip

  "scripts": {"dev": "vite --mode development --open --host 自己的电脑ip","build": "vue-tsc --noEmit && vite build","preview": "vite preview",},

二、html、js项目：添加package.json文件和app.json文件，npm run dev启一个Node服务器，根目录下创建public文件夹，将项目放入public中，作为静态资源即可访问
package.json:

{"name": "cpic-demo","version": "1.0.0","description": "","main": "app.js","scripts": {"dev": "nodemon app.js","test": "echo \"Error: no test specified\" && exit 1"},"repository": {},"author": "","license": "ISC","dependencies": {"express": "^4.17.1","request": "^2.88.2"}
}

app.js:

const express = require('express');
const app = express();
const port = 9000;const fs = require('fs');  // 处理文件
const path=require('path')  // 处理文件路径
const request = require('request'); // 处理post请求/* app.use(express.json()) app.use(express.urlencoded({ extended: false }))直接用express调用bodyParser的方法就可以了，bodyParser2019年被弃用
*/
app.use(express.json());
app.use(express.urlencoded({extended:true}));app.use( express.static(path.join(__dirname, 'public'))); //设置静态文件的路径const baseUrl = 'http://baseUrl';
app.get('/',(req,res) => { res.writeHead(200,{'Content-Type':'text/html'})fs.readFile('/index.html','utf-8',function(err,data){if(err){throw err ;}res.end(data);});
});//所有请求代理到baseUrl服务器
app.all('*', function(req, res, next) {//处理非图片资源的get和post请求if((req.method === 'GET' || req.method === 'POST') && req.headers['sec-fetch-dest'] !== 'image'){request({url: baseUrl + req.url,method: req.method,json: true,headers:{"content-type": "application/json",},body: req.body}, function(error, response, body) {if (error) {res.send(error);}else{// response 为转发的请求的详细内容，response.body和后面的body是同一个对象res.send(body);}}); }else{// 处理图片request({url: baseUrl + req.url,method: "GET",encoding: null,headers: {'Accept-Encoding': 'gzip, deflate'}}, function (error, response, body) {if (!error && response.statusCode == 200) {res.set('Content-Type', 'image/png;');res.send(body);}})}// next();
});
app.listen(port,() => {console.log(`app listening at http://自己的电脑ip:${port}`)
});

开发h5项目通过ip连接到手机上访问相关推荐

Vue+ts开发h5项目时引用百度地图报BMap问题
最近在用vue+ts开发h5项目时,有一个页面用到了vue-baidu-map,运行里面的搜索功能时,控制台一直报如下错误解决方法:
android移动开发软件安装,android studio 开发的安卓软件怎么安装到手机上
android studio 开发中如何让运用运行在真机中. 大体实现方式有3种: 分别是: 真机通过usb插到电脑上进行开发. android studio 上面编写程序进行编译apk版本,通过其他 ...
springboot开发的项目上传图片到服务器后不能访问
场景:在Windows系统测试正常的接口,在Linux上不能查看,检查发下,静态资源没有被拦截,但是还是访问不到,注意,此时配置的不被拦截的静态资源的路径不对,在Linux上,图片存放的路径是/usr ...
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
H5项目中 ios的border不显示问题
H5项目中 ios的border不显示问题在开发H5项目过程中,发现先天如果用border,在安卓正常显示,苹果则显示不出来原因是border给0.01rem(1px) 解决方法:遇到需要用bor ...
如何把android studio中的项目发布到手机上（超详细版）
一,前言在学习安卓开发的小伙伴们,相信有不少人有这样的冲动:总想把自己写的项目安装到自己手机上.那么到底该如何做呢?下面以小米MI 6x手机为例,来说明如何做. 二,前期准备 1,打开开发者模式以 ...
xcode php插件,H5项目开发iOS插件功能的实例代码
HBuilder用来写H5项目,Xcode用来写iOS原生的插件,我所需实现的是,在H5页面点击打印,运行iOS原生插件来实现连接蓝牙打印机并打印出获取的内容. 首先去HBuilder文档上,下载HB ...
近期H5项目开发小结
前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动).主要是新品牌的推广需要,当然也有给公司以前老客户做的案例.今天主要总结下为新品牌开发的2个h5推广:就 ...
【iOS开发】ipa安装到手机上的三种方式
转载地址:ipa安装到手机上的三种方式 ipa包安装三种方式,优先推荐第一种方法(通过iTunes安装). 1.通过iTunes安装数据线连接手机之后,会自动连接iTunes,(第一次连接的时候会 ...

开发h5项目通过ip连接到手机上访问

开发h5项目通过ip连接到手机上访问相关推荐

最新文章

热门文章