web前端在手机上查看电脑上的项目（电脑请求的数据手机可以同步，可以热更新）

想必大家都知道一个很简便的方法，如下：

第一种方法：

首先关掉自己电脑的防火墙

第一步手机给电脑共享热点

第二步电脑上面查看当前wifi的属性，找到ipv4地址并复制

第三步运行项目，在浏览器地址栏把localhost替换成复制的ipv4地址回车

第四步再次点击浏览器地址栏会出现二维码按钮，点击之后手机微信扫一扫就可以
或者复制修改后的浏览器地址到手机

第二种方法

软件下载地址

下载完成之后确保自己手机跟电脑是同一个网络，然后先去注册一个账号并实名认证，成功之后点印射列表去新建印射具体内容如下

完成之后在编码器打开项目在全局新建一个名字为vue.config的文件夹在其下新建index.js（注意里面需要替换你的ipv4地址）

代码附上："use strict";
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.const path = require("path");module.exports = {dev: {// PathsassetsSubDirectory: "static",assetsPublicPath: "/",proxyTable: {},// Various Dev Server settings//！！！这一块的地址是我更改后的ipv4地址，具体地址是多少根据你们的ipv4地址直接替换即可host: "192.168.171.202", //'127.0.0.1',//192.168.31.220 // can be overwritten by process.env.HOSTport: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determinedautoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-/*** Source Maps*/// https://webpack.js.org/configuration/devtool/#developmentdevtool: "cheap-module-eval-source-map",// If you have problems debugging vue-files in devtools,// set this to false - it *may* help// https://vue-loader.vuejs.org/en/options.html#cachebustingcacheBusting: true,cssSourceMap: true,},build: {// Template for index.htmlindex: path.resolve(__dirname, "../dist/index.html"),// PathsassetsRoot: path.resolve(__dirname, "../dist"),assetsSubDirectory: "static",assetsPublicPath: "/",/*** Source Maps*/productionSourceMap: true,// https://webpack.js.org/configuration/devtool/#productiondevtool: "#source-map",// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ["js", "css"],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report,},
};

然后复制下面图片的地址

复制完成之后打开编码器找到config.js将刚刚复制的地址粘贴过来替换即可

最后启动项目在手机浏览器中输入network地址就可以同步电脑的项目啦

web前端在手机上查看电脑上的项目（电脑请求的数据手机可以同步，可以热更新）相关推荐

vue如何在手机上查看vue-cli构建的项目
vue.js学习之如何在手机上查看vue-cli构建的项目链接描述
如何配置nginx，实现在手机上查看页面？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何配置ngi ...
【微信小程序】在手机上查看调试微信小程序
在上篇"注册一个微信小程序"虽然没有申请认证,但还是可以拿到小程序ID和小程序密钥的.有了小程序ID和小程序密钥的,我们就可以在手机上查看调试微信小程序了. 创建项目要填写注册时 ...
在手机上查看vue项目
用vue-cli构建的项目有时候有些功能需要在手机上测试,比如上传图片的时候调用手机拍照功能或者查看相册的功能,这个时候就要用到手机测试了,那么如何在手机上查看测试vue-cli构建的项目?今天就写一 ...
CAD快速查看图纸怎么操作？怎么在手机上查看CAD图纸？
CAD怎么快速查看图纸?怎么在手机上查看图纸?相信不少小伙伴都会有这样的疑问!其实,除了在PC端查看图纸,我们也可以在手机上查看CAD图纸,也是十分方便的! 我们都知道的,由于CAD图纸格式的特殊性 ...
如何在手机上查看搜索引擎快照？
搜索引擎快照是一个非常方便且实用的工具,它能够在搜索结果不可用的时候(无法访问.被删除),快速查看到内容,不受网站宕机影响. 但在目前的移动搜索引擎页面,想要查看快照非常困难. 那么该如何在手机上查 ...
在非华为Windows10电脑上安装华为电脑管家
一.准备内容 ①下载华为电脑管家 ②下载华为电脑管家安装工具二.在非华为电脑上安装华为电脑管家步骤 2.1.修改系统时间为2020年7月16日 2.2.打开华为电脑管家安装工具进行安装三.打开电脑 ...
邮件html在手机查看,怎样在手机上查看邮件手机上有从电脑邮箱发来 – 手机爱问...
2008-11-19 电脑如何连接邮箱我电脑上有一个邮 1.开始-所有程序-Outlook Express-工具-帐户-添加-邮件2.在"显示名"处写上自己的名字(真名,别名均可 ...
html怎么查看cad文件,怎么将电脑CAD文件在手机上查看？原来怎么简单！
戳上方蓝字关注我们吧 AutoCAD是一种使用电脑进行图纸绘图的一种方式,正是因为绘图操作需要通过CAD软件进行操作,间接的就会形成CAD文件只能在电脑上打开的兼容性. 日常工作,我们不能保证任何的时 ...

web前端在手机上查看电脑上的项目（电脑请求的数据手机可以同步，可以热更新）

想必大家都知道一个很简便的方法，如下：

第一种方法：

第二种方法

web前端在手机上查看电脑上的项目（电脑请求的数据手机可以同步，可以热更新）相关推荐

最新文章

热门文章