vue本地项目实现局域网访问

vue本地项目实现局域网访问
首先需要在同一个网络中，才能进行互相访问
记得先关闭防火墙（若是需要长时间关闭防火墙觉得不安全请参考这篇博客）

首先需要找到config下的index.js文件，更改访问的host地址，将其改为 host: '0.0.0.0'

这样就已经能通过ip地址和localhost访问了，但是会发现启动后他是这个样子
这时就需要设置启动后终端显示localhost和network访问地址
找到build文件夹的webpack.dev.conf.js文件

找到其中的compilationSuccessInfo里的messages，如下图，在其中添加：

`Local: http://localhost:${port}`,
`Network: http://${require('ip').address()}:${port}`,

这时再重新启动项目，启动后终端既可以显示localhost和network访问地址，之后就可以通过ip地址（注意这里获取到的是以太网的ip）+端口号来访问项目了
在配置后我出现了network访问地址和当前ipv4地址不同的情况，导致远程访问出现问题。之后我查了它获取到的ip和自己电脑的网络配置，发现他获取的是以太网 2的ipv4地址

然后打开网络适配器，发现以太网 2是virtualBox虚拟机的一个虚拟网卡，将其禁用就可以正确获取到自己网络的ip
获取WLAN地址的方法

vue本地项目实现局域网访问相关推荐

vue本地项目静态资源管理
vue本地项目静态资源管理统一放在src/static里面css,images,js index.html里面使用重置样式 <link rel="stylesheet" h ...
Vue本地项目实现其他局域网电脑在线访问
Code Is Never Die ! 项目在本地npm run dev跑起来,默认为http://localhost:8080在当前IP下访问没有问题,但是同一局域网下的其他同事却访问不了,显示ER ...
Vue项目设置局域网访问方法
本人Vue脚手架版本为@vue/cli 5.0.4 创建出的Vue项目工程格式如图方法为修改config 文件夹下的index.js文件将host默认的localhost修改即可.
vue本地项目启动时遇到coreJs相关报错问题处理
今天在启动本地的vue项目时,编译后报错是因为core.js这个包丢失,需要大家重新下载即可命令如下: ①使用npm的 npm install core-js@3 有淘宝镜像就:cnpm inst ...
vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理 ...
vue本地项目——小黑记事本
B站看到了一套vue框架入门课程,敲了一个小项目(小黑记事本),欢迎批评指教. 一.实现效果输入框输入任务,按下回车键,添加到任务最后鼠标移动到某项任务,该任务后面出现红色叉号,点击可删除次任务 ...
vue 局域网如何访问本地项目
1.保证别人可以ping通你的地址,如果ping不通,(Windows)先确定入站规则是否启用 2.在config/index.js里,把 host: 'localhost', 改为 host: '0 ...
关于vue项目本地localhost可以正常访问项目，ip却无法访问项目的解决办法
关于vue项目本地localhost可以正常访问项目,ip却无法访问项目的解决办法在进行本地页面调试的时候,地址栏可以输入两种地址来访问页面 http://localhost:8080 http:/ ...
tomcat项目部署到本地局域网访问
再本地局域网访问之前,必须确保自己的项目已经能在tomcat中部署运行设置本地局域网的核心步骤在cmd中输入ipconfig,查看wlan的IP地址(一定是wlan的),以我的192.168.1. ...

vue本地项目实现局域网访问

vue本地项目实现局域网访问相关推荐

最新文章

热门文章