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来访问项目
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍vue2.0 移动端实现下拉刷新和上拉加载更多的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了element-ui在table中如何禁用其中几行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
组件是Vue核心功能之一,合理的组件化,可以减少我们代码的冗余,提高项目的可维护性,下面这篇文章主要给大家介绍了关于Vue中父子组件通信与事件触发的相关资料,需要的朋友可以参考下2022-03-03
给大家详细分析了vue.js之props传递参数的相关知识以及问题解决方法，需要的朋友参考下吧。2017-12-12
手写可拖动穿梭框组件CustormTransfer vue实现示例
这篇文章主要为大家介绍了手写可拖动穿梭框组件CustormTransfer vue实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了JavaScript 沙箱探索，沙箱是基于 event bus 形式的通信实现上层的功能，文章的例子选择接口实现了 web worker 与 quickjs 的 EventEmitter，,需要的朋友可以参考一下2021-10-10
要实现 Vue 自定义组件改变组件背景色,你可以通过 props 将背景色作为组件的一个属性传递给组件,在组件内部监听这个属性的变化,并将其应用到组件的样式中,下面通过示例代码介绍Vue如何实现自定义组件改变组件背景色,感兴趣的朋友一起看看吧2024-03-03
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了vue项目中在可编辑div光标位置插入内容的实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-01
下面小编就为大家分享一篇vue.js给动态绑定的radio列表做批量编辑的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论