完美解决通过IP地址访问VUE项目的问题

第一步

1.将config里面的host设置成0.0.0.0

host: '0.0.0.0',

2.修改package.json

"scripts": {
  "start": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
}

第一步和第二步都有ip，其实第二步优先级高，这里第二步的host可以不设置，vue默认执行第一步的设置

3.查看开发机的ip地址，并告诉给其他小伙伴，还有端口号

补充知识：vue项目通过本地ip实现真机调试

使用webpack打包后

cmd 输入 IPCONFIG 拿这个地址

然后去package.json 在dev里面输入 你的ip

然后npm run dev 运行即刻

你的电脑 链接的wifi 需要和别人想访问的设备链接的wifi 一致 否则ip不一致无法调试

以上这篇完美解决通过IP地址访问VUE项目的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现手机扫描二维码预览页面效果

    本文实例为大家分享了Vue实现手机扫描二维码预览页面的具体代码,供大家参考,具体内容如下 背景:vue-cli3 + ant-design-vue 搭建的后台管理系统 需求:实现扫描二维码即可在手机预览H5页面功能 使用插件:qrcode step1:安装插件 npm install qrcode --save step2:引入插件 在项目中新建QRcode.vue文件 <template> <div id="qrCode"> <div id="

  • vue 移动端记录页面浏览位置的方法

    记录一下本次项目我使用的方法,有更简单便捷的方法,欢迎交流 描述: 假设有a b c 页面 从a页面 到 b页面 ,b页面到c页面 b到c页面的时候需要记录当前b的浏览位置,c返回到b的时候滚动到上次浏览的位置 b在返回a的时候,在从a进入b 返回的是b的顶部(也就是不记录浏览位置) 做法: 使用到了vuex ,beforeRouteLeave 1.首先在vuex中state定义一个变量来记录当前的浏览的位置 //state中定义数据 state: { carrerTouScroll: { he

  • vue使用rem实现 移动端屏幕适配

    要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. postcss-pxtorem:转换px为rem的插件 安装 postcss-pxtorem npm install postcss-pxtorem --save 新建rem.js文件 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前

  • 详解vue中移动端自适应方案

    方案1: 直接引入js  (自己 写的动态改变fontsize的js) function htRem() { var ww = document.documentElement.clientWidth; if (ww > 750) { ww = 750; } document.documentElement.style.fontSize = ww / 7.5 + "px"; } htRem(); window.onresize = function() { htRem(); };

  • vue实现移动端悬浮窗效果

    vue实现移动端悬浮窗效果

    本文讲述,在使用VUE的移动端实现类似于iPhone的悬浮窗的效果. 相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove mouseup对应的是PC端的事件 touchcancel 当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发touchcancel.一般会在touchcancel时暂停游戏.存档等操作. 效果图 实

  • 完美解决通过IP地址访问VUE项目的问题

    第一步 1.将config里面的host设置成0.0.0.0 host: '0.0.0.0', 2.修改package.json "scripts": { "start": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", } 第一步和第二步都有ip,其

  • 不能通过IP地址访问VUE项目的问题及解决

    目录 不能通过IP地址访问VUE项目问题 问题背景 问题解决 指定IP访问VUE项目 不能通过IP地址访问VUE项目问题 问题背景 目前项目是前后端分离的,VUE+SpringBoot,我拷贝下来前端项目在自己机器上运行,能通过localhost+端口号访问,但不能ton过IP地址访问 问题解决 上网找了很多资料,一开始以为是自己后端Java项目的问题,甚至在考虑tomcat的配置,可是tomcat是框架或编译器自带的,并不好修改. 后来发现应该是前端项目的问题,搜索了一下果然找到了问题根源 只

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

    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地址访问注意事项及说明

    目录 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,      

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

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

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

  • 解决webpack无法通过IP地址访问localhost的问题

    1.问题描述: 今天用 webpack (v1.14.0)配置本地服务,为了能在移动端预览开发效果,需要通过 IP 地址生存二维码然后手机扫描访问.却发现不能通过 ip 访问 localhost. 2.解决方案: 经多方查询,在 npm run dev 时添加参数 --host 0.0.0.0即可. 以上这篇解决webpack无法通过IP地址访问localhost的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 参考地址:https://github.com/

  • 完美解决beego 根目录不能访问静态文件的问题

    beego可算是Go框架里面文档最多的了.学起来比较容易.但是框架自身的局限性却带了不小的问题. 最近我在处理flash跨域问题上就遇到个活生生的例子: flash里面的as3访问外网时没啥问题.可是假如通过网页调取的情况下,flash访问的外网又与所在网页不是一个域的.就会产生跨域问题.打开浏览器,f12之后,看到的就是flash没有访问你的url,而是访问了这个url所在的域名根目录下的配置文件crossdomain.xml.该配置文件来设置跨域访问的权限. 这时候需要在你的域名根目录下放个

  • 推荐的用Asp实现屏蔽IP地址访问的代码

    By zkxp 2/15/2006 http://zkxp.cnblogs.com '受屏蔽IP地址(段)集合,星号为通配符,通常保存于配置文件中. <% Const BadIPGroup = "220.200.59.136|220.205.168.141" If IsForbidIP(BadIPGroup) = True Then     Response.Write(GetUserIP &"IP地址禁止访问")     Response.End()

  • vue项目如何让局域网ip访问配置设置

    vue项目如何让局域网ip访问配置设置

    目录 vue让局域网ip访问配置设置 vue局域网使用ip无法访问的解决 vue让局域网ip访问配置设置 在开发中,为了让同一局域网的小伙伴,都可以通过IP地址访问到vue-cli搭建的项目,要怎么配置呢? 第一步:修改config文件中找到 index.js 文件的host改成 ‘0.0.0.0’ 第二步:检查 package.json 文件里进行配置,scripts.dev配置是否设置 host为‘0.0.0.0’ 这里我要强调下,第一步和第二步都有ip,其实第二步优先级高,这里第二步的ho

  • 解决django接口无法通过ip进行访问的问题

    django接口可以通过localhost或者127.0.0.1进行访问,但无法通过本机ip地址访问 1. 修改django项目中的settings.py文件 ALLOWED_HOSTS = "*" 2. cmd窗口运行命令启动 python manage.py runserver 0.0.0.0:8080 3. pycharm中启动 修改Run/Debug Configurations中的Host为0.0.0.0 补充知识:Django允许外部ip访问 1.关闭防火墙 service

随机推荐