Vue项目通过network的ip地址访问注意事项及说明

更新时间：2022年09月05日 14:13:42 作者：Tangctt

这篇文章主要介绍了Vue项目通过network的ip地址访问注意事项及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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项目Network: unavailable的解决

vue项目npm run serve 后，只有localhost访问，network不能访问，如下：

由于这个Network是被写死进文件中的，所以如果网络被切换了，记得修改ip地址，确保与当前的联网ip一致

解决办法

在vue项目根目录下找到或创建 vue.config.js 文件

在devServer配置里面添加public，如下代码所示。 public:‘192.168.1.2:8080’,

module.exports = {
    configureWebpack: {},
    devServer: { // 环境配置
      host: '0.0.0.0',
      public: '192.168.1.2:8080', // 此处是自己电脑IP地址！
      port: '8080',
      https: false,
      disableHostCheck: true,
      open: false // 配置自动启动浏览器
    }
}

那么，如何看public后的自己电脑IP地址？

方法一：

打开控制面板\所有控制面板项\网络和共享中心

在网络连接窗口中双击打开正在使用的网络

点击详细信息，找到 IPv4地址，复制添加到pubilc后重新运行后即可

方法二：

win+R 输入cmd进入控制台，输入 ipconfig 查看

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-cli3.0实现一个多页面应用的历奇经历记录总结
这篇文章主要介绍了vue-cli3.0实现一个多页面应用的历奇经历,总结分析了vue-cli3.0实现一个多页面应用遇到的问题与相关操作注意事项,需要的朋友可以参考下
2020-03-03
vue+axios实现post文件下载
这篇文章主要为大家详细介绍了vue+axios实现post文件下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
解决ant Design中this.props.form.validateFields未执行的问题
这篇文章主要介绍了解决ant Design中this.props.form.validateFields未执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Vue中代码编辑器与实时预览功能
CodeMirror提供了强大的代码编辑功能,而Vue.js使得组件的创建和数据绑定变得非常简单,当用户编辑代码时,实时预览会根据代码的变化进行更新,从而为用户提供了一个交互式的编程环境,这篇文章主要介绍了Vue中如何进行代码编辑器与实时预览,需要的朋友可以参考下
2023-10-10
Vue2.0利用vue-resource上传文件到七牛的实例代码
本篇文章主要介绍了Vue2.0利用vue-resource上传文件到七牛的实例代码，具有一定的参考价值，有兴趣的可以了解一下
2017-07-07
vue.js自定义组件实现v-model双向数据绑定的示例代码
这篇文章主要介绍了vue.js自定义组件实现v-model双向数据绑定的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
Vue使用axios进行get请求拼接参数的2种方式详解
axios中post请求都是要求携带参数进行请求,这篇文章主要给大家介绍了关于Vue使用axios进行get请求拼接参数的2种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
浅谈vue中所有的封装方式总结
因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目，那么应该如何封装，本文就介绍一下如何封装，感兴趣的可以了解一下
2021-07-07
vue项目如何去掉URL中#符号的方法
在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋,下面这篇文章主要给大家介绍了vue项目如何去掉URL中#符号的相关资料,文中通过实例代码的非常详细,需要的朋友可以参考下
2022-07-07
vue图片裁剪插件vue-cropper使用方法详解
这篇文章主要为大家详细介绍了vue图片裁剪插件vue-cropper使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12