vue项目netWork地址无法访问的问题及解决
更新时间：2023年09月26日 17:09:10 作者：episode33
这篇文章主要介绍了vue项目netWork地址无法访问的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目netWork地址无法访问
1.配置vue.config.js
devServer: {
host: "0.0.0.0",
public: "172.201.10.26:1888", // 此处是自己电脑IP地址！
port: 1888,
https: false,
disableHostCheck: true,
open: false, // 配置自动启动浏览器
}2.修改host为“0.0.0.0”
public：改为本机ip地址
（1）本机ip查询方法 win+R 后输入cmd弹出命令行
（2）命令行中输入ipconfig后回车，找到IPv4，复制地址
3.重新运行vue项目
如果出现网络无法访问状态，请确认配置端口号是否相同
vue项目通过network的ip地址访问注意事项
在config.js文件中的dev中修改host为0.0.0.0
devServer: { // 环境配置
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
disableHostCheck: true,
open: false // 配置自动启动浏览器
},或者在package.json文件下"scripts"的"dev"后面加上–host 0.0.0.0"，如果没有dev就找serve
"scripts": {
"serve": "vue-cli-service serve --host 0.0.0.0",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},设置完成之后就可以用ip+端口号的形式来访问项目
在使用network进行局域网访问时注意
- 局域网访问访问需要打开出站、入站规则
- 防火墙默认打开，无法进行network的ip访问，ip为本机在局域网中的地址
- 关闭防火墙（公用网络）和安全软件即可
设置完成即可使用其它设备在同一局域网下进行访问了
注意：
如果更换了网络状态，ip地址就会发生改变，就不能用旧的ip地址访问，要使用新ip来访问项目
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue实现小购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要介绍了vue 实现走马灯效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
这篇文章主要介绍了vue+echarts+datav大屏数据展示及实现中国地图省市县下钻,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
Vue实现登录保存token并校验实现保存登录状态的操作代码
这篇文章主要介绍了Vue实现登录保存token并校验实现保存登录状态,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-02-02
vue3 element-plus二次封装组件系列之伸缩菜单制作
这篇文章主要介绍了vue3 element-plus二次封装组件系列之伸缩菜单制作,是基于vue3 vite element-plus搭建的，值的注意的时候，里面的图标组件是经过处理的，结合实例代码介绍的非常详细，需要的朋友可以参考下2023-01-01
本文详细介绍了Vue3多页面应用开发中VueRouter4的配置和使用方法,包括首页、列表页、详情页的页面导航与参数传递,并展示了Pinia状态管理与用户登录状态、用户信息管理的实现方法,需要的朋友可以参考下2026-04-04
在数据报表或管理系统中,经常需要按某个字段对数据进行分组,并计算每组的统计值（如求和、平均值）,本文将通过一个完整的示例,演示如何使用vxe-table实现数据分组统计与表尾合计,有需要的小伙伴可以了解下2026-06-06
vue最强table vxe-table 虚拟滚动列表 前端导出问题分析
最近遇到个问题,后台一次性返回2万条列表数据并且需求要求所有数据必须全部展示,不能做假分页,怎么操作呢,下面通过本文介绍下vue最强table vxe-table 虚拟滚动列表 前端导出问题,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vertx基于EventBus发送接受自定义对象,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
下面小编就为大家分享一篇Vue中this.$router.push参数获取方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论