我的编程空间,编程开发者的网络收藏夹
学习永远不晚

vue项目如何实现ip和localhost同时访问

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue项目如何实现ip和localhost同时访问

vue实现ip和localhost同时访问

因为localhost只能在本机访问,如果想其他电脑访问或者是移动端访问需要采用ip来访问 实现效果

效果图

1.在webpack.dev.conf.js里面配置messages字段

messages: [
            `App runing at: `,
            `Local: http://localhost:${port}`,
            `Network: http://${require('ip').address()}:${port}`,
          ],

2.其他配置

(1)在package.json配置

 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

(2)在config/index.js里面配置host字段

host: '0.0.0.0', // can be overwritten by process.env.HOST

注意:在第二步只需要配置(1)或者(2)不需要全部配置,踩坑

vue使用localhost和新ip地址访问项目

问题描述

项目在本地上启动,想被其他电脑访问

原本只要连接局域网输入地址就可以,但是现在连接网线都实现不了

查过很多关于ip连接不显示的资料,都不行

结果查到的是自己的vue项目问题,更改有效

解决办法:更改三个文件(我只改了两个就行)

1、config->index.js

将dev下的host对应数据改成:'0.0.0.0'

(后端哥哥说0.0.0.0代表时刻变动的本机ip,你也可以直接改成不变的本机ip,比如我可以改成192.168.0.179,以下所有的都是这样)

 

2、package.json

把dev对应的数据后面加上: --host 0.0.0.0

3、build->webpack.dev.conf.js(我不用改,我本来就是动态的)

host对应数据改成:'0.0.0.0'

至此我的项目就可以运行以后使用本机ip查看啦:

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

vue项目如何实现ip和localhost同时访问

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

vue项目如何实现ip和localhost同时访问

这篇文章主要介绍了vue项目如何实现ip和localhost同时访问,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2022-11-13

springboot如何实现启动直接访问项目地址

这篇文章主要为大家展示了“springboot如何实现启动直接访问项目地址”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“springboot如何实现启动直接访问项目地址”这篇文章吧。spring
2023-06-22

云服务器部署项目用ip如何访问端口地址和端口ip地址

一、访问端口地址我们可以使用Python的ping命令来测试云服务器的端口地址和端口ip地址是否有效。使用ping命令的基本步骤如下:安装python和pip```pythonimportsubprocessimporttimeclassServer:definit(self,ip):self.ip=ipself.po
云服务器部署项目用ip如何访问端口地址和端口ip地址
2023-10-28

云服务器部署项目用ip如何访问网络地址和端口

根据云服务器的规模和服务需求选择合适的ip地址一般情况下,云服务器的ip地址可以选择一些常见的端口号来配置。例如,如果你的云服务器只支持HTTP和FTP协议,那么可以选择192.168.1.1或192.168.2.1等端口号。如果你的云服务器支持P2P协议,那么可以选择300.50.1.1或300.50.2.1等端口号
2023-10-27

云服务器部署项目用ip如何访问端口地址和端口

端口和端口号是用于访问云服务器的各种服务的。通过使用端口号,您可以访问某些服务,而通过使用端口号,您可以访问其它服务。例如,您可以使用Python编程语言创建一个名为“services”的服务,该服务接受一个端口号为8000的端口。通过使用该端口,您可以向该服务发送请求,而该服务会将请求转发到该端口。要使用端口号,您需
2023-10-27

如何用Ngork实现外网访问你的本地Web项目

如何用Ngork实现外网访问你的本地Web项目,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 前言有时候你在本地写了一个web项目,地址是http:localhost:8080
2023-06-17

云服务器部署项目用IP如何访问端口地址和端口信息

1.确定云服务器的公网IP地址在部署项目之前,首先需要确定云服务器的公网IP地址。这个IP地址是云服务器在公网上的唯一标识,其他用户可以通过该IP地址来访问你的服务器。2.配置安全组规则安全组是云服务器的一种网络访问控制机制,用于控制进出云服务器的网络流量。在部署项目之前,你需要配置安全组规则,允许外部用户通过特定的端口访问你的云服务器。例如,如果你的项目使用的是HTTP协议,默认的HTTP端口是80,...
2023-10-27

云服务器部署项目用ip如何访问端口地址信息和地址

打开控制面板并选择“管理工具”。在“管理工具”窗口中,右键单击“服务和应用程序”。选择“服务”。找到“DNSClient”服务,右键单击并选择“属性”。在属性窗口中,找到“DNSClientURL”选项,然后单击“添加”。在弹出的“DNSClientAddr”窗口中,输入服务器IP地址&ldq
2023-10-27

如何在PHP项目中实现实时消息推送和WebSocket支持?

如何在PHP项目中实现实时消息推送和WebSocket支持?随着互联网的发展,实时消息推送和WebSocket成为了现代web应用中不可或缺的功能。实时消息推送能够实现及时通知和消息传递,提高用户体验,而WebSocket可以用于实现实时双
如何在PHP项目中实现实时消息推送和WebSocket支持?
2023-11-02

如何在PHP项目中实现定时任务和计划任务?

如何在PHP项目中实现定时任务和计划任务?在开发一个PHP项目时,有时候需要执行一些定时任务或者计划任务。这些任务可能包括发送邮件、清理临时文件、生成报表等等。本文将介绍如何使用PHP来实现这些定时任务和计划任务。使用Crontab定时器C
如何在PHP项目中实现定时任务和计划任务?
2023-11-03

如何进行vue项目中的支付功能实现(微信支付和支付宝支付)

如何进行vue项目中的支付功能实现(微信支付和支付宝支付),针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。项目中常见的支付方式 支付宝支付 微信支付 余额支付(
2023-06-22

编程热搜

目录