vue在手机中通过本机IP地址访问webApp的方法

vue中通过localhost:8080,就可以访问浏览项目,但是如果改成本机IP则会报错

通过localhost:8080访问效果

通过本机IP显示效果

如果想通过手机输入本机IP访问需要在package.json中配置

package.json配置

最后在手机通过IP就可以访问到webApp,或借助草料二维码生成修改后项目地址的二维码,掏出手机扫一扫即可~

通过机IP访问效果

Tips:需要手机和电脑在一个局域网(wifi)下

总结

以上所述是小编给大家介绍的vue在手机中通过本机IP地址访问webApp的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 基于VUE移动音乐WEBAPP跨域请求失败的解决方法

    在学习一位vue大牛的课程<VUE2.0移动端音乐App开发>时,由于vue的版本原因遇到了一些问题 这是其中之一,花费了很多的时间去解决 虽然搞定了这个问题,但是很多东西理解也不是很到位,下面详细说: 系统windows,vue版本2.9.1 项目结构如下: 这里就知道版本差异了,我没有dev-server这个文件,按照黄大牛的配置会报404的错误,错误具体我就不贴了 直接上解决办法 首先在config目录下配置index.js文件如下 然后在webpack.dev.conf中配置如下 当然

  • Vue2.0仿饿了么webapp单页面应用详细步骤

    部分截图 安装&&运行: 1.安装 node:http://nodejs.cn/download/ 安装 git:https://git-scm.com/downloads 2.从我的仓库克隆代码: $ git clone https://github.com/ColinScales/shell 3.安装vue脚手架工具vue-cli: $npm install vue-cli -g 4.进入代码根目录安装依赖: $ npm install --save-dev 5.运行命令: $ npm

  • vue-router实现webApp切换页面动画效果代码

    vue-router实现webApp切换效果 演示效果 快速集成 1.复制PageTransittion.vue到项目目录.2.修改router配置. Router.prototype.goBack = function () { this.isBack = true window.history.go(-1) } const router = new Router({ routes: [ { path: '/', name: 'PageTransition', component: PageT

  • 详解Vue webapp项目通过HBulider打包原生APP

    Vue webapp项目通过HBulider打包原生APP 1.webapp项目已经通过vue-cli搭建的脚手架写好了,然后通过webpack打包成一个部署文件list,如下: 2.打开HBulider,打开目录,选择这个list,项目名称自己更改.(或者直接新建一个app项目,然后把里边的unpackage和manifest这两个保留下来,其他的替换成自己dist文件里边的内容) 这个时候是web项目,需要改为APP项目(如果直接新建的app,请忽略此步) 更改前: 更改后:  3.在HB中

  • Vue.js 2.0和Cordova开发webApp环境搭建方法

    HTML5开发APP技术文档 一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: 4.环境配置: node 6+ npm 3+ (最好下载Node.js官方最新版本) .jdk1.8.SDK(请直接下载Androidstudio软件官方最新版本,已集成AndroidSDk,建议以默认路径安装) . 二.系统环境变量配置(以window7为例) 1.AndroidSDK配置 A)添加用

  • vue在手机中通过本机IP地址访问webApp的方法

    vue中通过localhost:8080,就可以访问浏览项目,但是如果改成本机IP则会报错 通过localhost:8080访问效果 通过本机IP显示效果 如果想通过手机输入本机IP访问需要在package.json中配置 package.json配置 最后在手机通过IP就可以访问到webApp,或借助草料二维码生成修改后项目地址的二维码,掏出手机扫一扫即可~ 通过机IP访问效果 Tips:需要手机和电脑在一个局域网(wifi)下 总结 以上所述是小编给大家介绍的vue在手机中通过本机IP地址访

  • Shell脚本中获取本机ip地址的3个方法

    方法一: 复制代码 代码如下: /sbin/ifconfig -a|grep inet|grep -v 127.0.0.1|grep -v inet6|awk '{print $2}'|tr -d "addr:" or /sbin/ifconfig|sed -n '/inet addr/s/^[^:]*:\([0-9.]\{7,15\}\) .*/\1/p' 方法二: 复制代码 代码如下: local_host="`hostname --fqdn`" local_i

  • Linux Shell脚本中获取本机ip地址方法

    方法一:ifconfig -a ifconfig -a|grep inet|grep -v 127.0.0.1|grep -v inet6|awk '{print $2}'|tr -d "addr:" 命令解析 ifconfig -a  和window下执行此命令一样道理,返回本机所有ip信息 grep inet                  截取包含ip的行 grep -v 127.0.0.1      去掉本地指向的那行 grep -v inet6             去掉

  • 分享Python获取本机IP地址的几种方法

    目录 1.使用专用网站 2.使用自带socket库 3.使用第三方netifaces库 1.使用专用网站 获取的是公网IP 网址:http://myip.ipip.net 代码: import requests res = requests.get('http://myip.ipip.net', timeout=5).text print(res) 比较喜欢用这个,在命令窗口也能使用: curl http://myip.ipip.net 2.使用自带socket库 获取的是局域网IP. impo

  • Java获取本机IP地址的三种方法总结

    目录 1 获取局域网IP地址 2 获取全部 IPV4/IPV6 IP地址 3 获取全部存放本机IP地址 知识点补充 1 获取局域网IP地址 InetAddress.getLocalHost().getHostAddress(); 2 获取全部 IPV4/IPV6 IP地址 private static List<String> getIpAddress() throws SocketException { List<String> list = new LinkedList<

  • JS获取本机IP地址的2种方法

    目录 1.获取本机IP地址方法1: 2.获取本机IP地址方法2 解决方案: 总结 1.获取本机IP地址方法1: if(typeof window != 'undefined'){     var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;     if (RTCPeerConnection) (()=>{        

  • python 获取本机ip地址的两个方法

    第一种: 复制代码 代码如下: import socket import fcntl import struct def get_ip_address(ifname): s = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) return socket.inet_ntoa(fcntl.ioctl( s.fileno(), 0x8915, # SIOCGIFADDR struct.pack('256s', ifname[:15]) )[20:24]

  • bat脚本显示本机IP地址的两种方法(内网ip)

    实现代码一: 通过 route print 实现 @echo off for /f "tokens=4" %%a in ('route print^|findstr 0.0.0.0.*0.0.0.0') do ( set IP=%%a ) echo %IP% 实现代码二: @echo off for /f "tokens=15" %%i in ('ipconfig ^| find /i "ip address"') do (echo %%i) p

  • vue项目实现通过ip地址访问和localhost访问方式

    目录 vue项目通过ip地址访问和localhost访问 vue项目中把localhost改成ip地址访问 vue2.0项目中 localhost改成ip地址访问 vue3项目改成ip地址访问 vue项目通过ip地址访问和localhost访问 为了实现vue项目启动服务,多个人可以查看,别人可以通过ip+端口访问 在config文件下的index.js文件中,修改host为: host: '0.0.0.0', 或者在package.json文件下"scripts"的"dev

  • Vue项目通过network的ip地址访问注意事项及说明

    目录 Vue通过network的ip地址访问 在使用network进行局域网访问时注意 vue项目Network: unavailable的解决 解决办法 Vue通过network的ip地址访问 在config.js文件中的dev中修改host为0.0.0.0  devServer: { // 环境配置         host: '0.0.0.0',         port: 8080,         https: false,         hotOnly: false,      

随机推荐