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来访问项目
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
element-ui tooltip修改背景颜色和箭头颜色的实现
这篇文章主要介绍了element-ui tooltip修改背景颜色和箭头颜色的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
webpack + vue 打包生成公共配置文件（域名） 方便动态修改
这篇文章主要介绍了webpack + vue 打包生成公共配置文件（域名） 方便动态修改,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
本文将详细介绍jQuery代码优化的9种方法,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了Vue声明式渲染详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了vue数组去重的12种方法示例全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
在Vue3中,公共组件的main.js文件扮演着非常重要的角色,它的作用主要体现在：注册全局组件、引入公共样式、引入Vue、引入组件、创建Vue实例、挂载实例,本文将围绕Vue3公共组件的main.js文件进行详细的阐述,包括其作用、常用代码等方面2023-08-08
vue在解析我们的组件时， 是通过打包成一个 js 文件，当我们的一个组件 引入过多子组件是，页面的首屏加载时间 由最后一个组件决定 优化的一种方式就是采用异步组件，这篇文章主要介绍了Vue3 异步组件 suspense,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了VUE3子表格嵌套分页查询互相干扰的问题解决方案,如果不需要做子表格的分页查询，那么可以直接在主表格中嵌套子表格，本文给大家介绍两种方式，需要的朋友可以参考下2024-01-01
vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架，这篇文章主要给大家介绍了关于vue移动端实现左滑编辑与删除的相关资料,需要的朋友可以参考下2021-05-05
这篇文章主要为大家详细介绍了vue3使用全局websocket的相关知识,文中的示例代码讲解详细,对我们深入学习vue3有一定的帮助,感兴趣的小伙伴可以参考一下2023-10-10
最新评论