vue踩坑笔记 七.使用ip地址访问本机运行的vue项目

最新推荐文章于 2023-09-15 22:50:27 发布
最新推荐文章于 2023-09-15 22:50:27 发布
阅读量470 收藏
点赞数
分类专栏： 大前端 vue 配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38052995/article/details/103322858
版权
大前端 同时被 3 个专栏收录
22 篇文章 0 订阅
订阅专栏
vue
20 篇文章 0 订阅
订阅专栏
配置
10 篇文章 0 订阅
订阅专栏

文章目录

一.确保本机tomocat 或者apache运行正常

在浏览器使用localhost或者127.0.0.1访问相关资源,保证web网络服务器正常

二.获取本机ip地址

进入dos界面

win+R

输入cmd

获取本机ip地址

输入ipconfig命令
在这里插入图片描述
获取本机ip地址
在这里插入图片描述

三.输入ip地址加端口号

端口号为你运行vue项目时的端口号,不一定时8080,根据实际情况填写
在这里插入图片描述
浏览器进行访问
在这里插入图片描述

四.运行错误或拒绝访问(很关键)

进入vue项目的根目录/package.json文件
在script/dev项中添加"–host 0.0.0.0"
在这里插入图片描述

五.重启项目

成功访问
在这里插入图片描述

一腔&孤勇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli项目无法用本机IP访问的解决方法
10-17
在开发Vue.js应用程序时，使用Vue CLI创建的项目通常会通过`npm run serve`命令启动一个本地开发服务器。然而，有时我们可能遇到一个问题，即在尝试通过本机IP地址访问这个开发服务器时，浏览器提示“拒绝了我们的...
ip地址访问vue运行项目
梧桐芊羽的博客
09-19 2821
ip地址访问vue运行项目 在未进行配置下，通过ip地址访问vue运行项目，是无法访问的。 vue项目想要通过ip地址访问运行项目，需执行以下操作。 1.查看本机IP地址。win+R打开cmd命令，输入ipconfig/all查看本机ip地址。 2.修改package.json文件中添加–host 0.0.0.0，然后重新重启项目。 "scripts": { "dev": "webpack...
vue项目运行后使用ip地址在手机上打开
weixin_44784401的博客
06-29 1237
vue项目运行后使用ip地址在手机上打开
vue发布到云服务器后，访问使用者的电脑上的本地服务
SanOrintea的博客
08-03 739
首先，接口中直接写localhost。发布以后，谁打开localhost就是谁的电脑的ip。因为js文件是下载到个人电脑的浏览器中运行的。，回车，到谷歌浏览器的设置页面。把其中的Block insecure private network requests改为disable。其次，谷歌浏览器有一项服务名为：Block insecure private network requests.发布以后，小A打开这个网页，小A的个人电脑中启动了个服务，如何让网页调取小A的服务？百度这个，是这个引起的。...
[vue]本地项目的访问
最新发布
前端
09-15 344
这个问题的场景是在同一局域网内的另一台电脑想要查看项目,发现默认的不是展示一个本地访问地址，一个IP地址访问地址。
vue访问本地资源
m0_62873187的博客
06-01 2367
vue项目不能直接访问本地资源，因为创建了node服务器，服务器上不能直接访问客户端的文件，而html文件可以直接访问本地资源，因为这个html本来就是本地打开的。如： <img :src="'http://localhost/'+url" alt="">只修要修改nginx.conf文件就行。在vue项目中直接访问ip+端口号即可。可以把本地资源在nginx上配成服务。配置好重启一下nginx即可。
vue项目使用自定义域名开启本地服务（ip地址和域名映射）
qq_2511276124的博客
07-04 3255
使用域名访问本地服务。
完美解决通过IP地址访问VUE项目的问题
10-15
在开发Vue项目时，我们通常使用`localhost`或者`127.0.0.1`来运行项目，但这只允许我们在本地环境进行测试。如果需要让其他设备（如手机或另一台电脑）访问我们的Vue应用，我们就需要通过IP地址来访问。本文将详细...
vue在手机中通过本机IP地址访问webApp的方法
10-18
主要介绍了vue在手机中通过本机IP地址访问webApp的方法,需要的朋友可以参考下
Vue进阶笔记讲义.docx
08-13
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果...
获取本机ip地址
06-03
利用InetAddress.getLocalHost()获取本机ip地址和本地主机名
【非同局域网】vue调取本地后台服务解决方法
qq_33645786的博客
03-29 1259
在紧张刺激害怕的居家办公中，我发现，我的网连不上公司要用的vpn，这也就导致我每次发布都要找领导吧我的代码从git上下载到他的电脑里，然后再上传到服务器，前端再进行调取，我还要看着服务器的日志去改错误，改完又要重复这个操作…我其实无所谓主要我BUG太多怕领导打我，于是变有了这个方法。 其实原理就是让两台电脑以为自己在一个局域网中就OK了，哪我们只要使用VPN让两个电脑产生这种错觉就OK了 使用TeamViewer软件可以轻松实现这个目标，本来是用来远程桌面的但是… 在设置>高级>安装vpn驱
vue 项目中调用电脑本地资源
weixin_52378342的博客
02-23 1219
<input type="file" ref="file" multiple="multiple" @change="onInputFileChange"> onInputFileChange() { var photos = [] for (let obj in this.$refs.file.files){ var file = this.$refs.file.files[obj] var url = URL.createObje
windows10 下本机搭建nginx发布部署vue项目并访问本机后端
jquery_learn的博客
02-01 823
Windows本机nginx部署vue项目
vue初体验1：新建vue3项目并启动访问（mac）
小浪与艳花
07-05 4178
HBuilderX集成了多种开发工具和语言，包括HTML、CSS、JavaScript、TypeScript、Vue.js、React等，可以帮助开发者更高效地进行Web前端开发。可以快速构建vue的工具，自动安装vue所需要的插件，避免手动安装各种插件，以及寻找各种cdn并一个一个引入的麻烦。2、集成了多种调试工具和模拟器，可以在不同的设备和浏览器上进行实时调试和预览，有助于更快的定位和解决问题。3、有多种代码重构和自动化工具，如代码格式化、自动缩进、自动补全等，有助于更规范和高效地编写代码。
vue项目在启动时，自动打开浏览器，并且打开地址是自己本地的IP地址
文龙刚的博客
02-03 2232
【代码】vue项目在启动时，自动打开浏览器，并且打开地址是自己本地的IP地址。
vue本地跨域的一种解决方案分享
yongeya的博客
06-04 411
vue本地跨域的一种解决方案分享 跨域产生的原因 本质原因：不满足同源策略 同源策略：浏览器的同源策略是浏览器上为安全性考虑实施的非常重要的安全策略，从一个域上加载的脚本不允许访问另外一个域的文档属性 跨域的对象： 浏览器与服务器之间 补充： 跨域请求的过程中，浏览器向服务器发送了请求，服务器接收到了请求，并返回对应数据，只是返回的数据被浏览器拦截 vue中的一种本地可用的解决方案 思路：既然跨域作用于浏览器与服务器之间，那么服务器与服务器之间的数据请求则不受同源策略影响，因此，可借用vue内部自带的服务器
vue获取本地IP地址 自动配置本地请求地址
代码小疯子
06-28 2959
这个背景是这样的，就是我运行这个 Vue 代码，然后再每次本机运行的时候,我的服务器是也是本地启动的，然后我每换一个环境环境，然后咱们这个IP就变了，所以我希望在我的配置文件中我启动的是调试模式的时候，他自动给我获取获取这个本机的这个地址。...
关于vue项目本地运行以后，输入本机ip不能访问的问题
weixin_33923148的博客
07-09 1697
这次同样是用vue-cli 搭建的，出现了本机ip不能访问的问题，通过修改config目录下的index.js文件里的dev下面的host字段解决了 但是以前的项目index是这样的，这样用本机ip就能访问 ...
Vue项目获取本机ip 地址
05-27
你可以在Vue项目的代码中使用以下代码获取本机IP地址： ``` // 引入node.js的os模块 const os = require('os'); // 获取本机IP地址 function getIPAddress() { const interfaces = os.networkInterfaces(); for ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值