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

目录
  • Vue通过network的ip地址访问
    • 在使用network进行局域网访问时注意
  • vue项目Network: unavailable的解决
    • 解决办法

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 查看

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

赞 (0)

相关推荐

  • vue中如何获取本地IP地址

    vue中如何获取本地IP地址

    目录 获取本地IP地址 1.在浏览器中 2.在vue文件中,实现如下 获取本地内网IP 获取本地IP地址 IP地址需要通过js获取: 网上有很多查询接口可以获取到IP,查到的搜狐的比较多,我这里就用搜狐的: http://pv.sohu.com/cityjson?ie=utf-8 1.在浏览器中 直接输入这个地址,就可以获取到ip信息: 2.在vue文件中,实现如下 (1)在config/index.js中 proxyTable:{ } ,在里面添加代理规则 '/api': { target:

  • 完美解决通过IP地址访问VUE项目的问题

    第一步 1.将config里面的host设置成0.0.0.0 host: '0.0.0.0', 2.修改package.json "scripts": { "start": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0", } 第一步和第二步都有ip,其

  • vue项目如何让局域网ip访问配置设置

    vue项目如何让局域网ip访问配置设置

    目录 vue让局域网ip访问配置设置 vue局域网使用ip无法访问的解决 vue让局域网ip访问配置设置 在开发中,为了让同一局域网的小伙伴,都可以通过IP地址访问到vue-cli搭建的项目,要怎么配置呢? 第一步:修改config文件中找到 index.js 文件的host改成 ‘0.0.0.0’ 第二步:检查 package.json 文件里进行配置,scripts.dev配置是否设置 host为‘0.0.0.0’ 这里我要强调下,第一步和第二步都有ip,其实第二步优先级高,这里第二步的ho

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

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

    目录 Vue通过network的ip地址访问 在使用network进行局域网访问时注意 vue项目Network: unavailable的解决 解决办法 Vue通过network的ip地址访问 在config.js文件中的dev中修改host为0.0.0.0  devServer: { // 环境配置         host: '0.0.0.0',         port: 8080,         https: false,         hotOnly: false,      

  • 不能通过IP地址访问VUE项目的问题及解决

    目录 不能通过IP地址访问VUE项目问题 问题背景 问题解决 指定IP访问VUE项目 不能通过IP地址访问VUE项目问题 问题背景 目前项目是前后端分离的,VUE+SpringBoot,我拷贝下来前端项目在自己机器上运行,能通过localhost+端口号访问,但不能ton过IP地址访问 问题解决 上网找了很多资料,一开始以为是自己后端Java项目的问题,甚至在考虑tomcat的配置,可是tomcat是框架或编译器自带的,并不好修改. 后来发现应该是前端项目的问题,搜索了一下果然找到了问题根源 只

  • vue项目实现通过ip地址访问和localhost访问方式

    vue项目实现通过ip地址访问和localhost访问方式

    目录 vue项目通过ip地址访问和localhost访问 vue项目中把localhost改成ip地址访问 vue2.0项目中 localhost改成ip地址访问 vue3项目改成ip地址访问 vue项目通过ip地址访问和localhost访问 为了实现vue项目启动服务,多个人可以查看,别人可以通过ip+端口访问 在config文件下的index.js文件中,修改host为: host: '0.0.0.0', 或者在package.json文件下"scripts"的"dev

  • vue在手机中通过本机IP地址访问webApp的方法

    vue在手机中通过本机IP地址访问webApp的方法

    vue中通过localhost:8080,就可以访问浏览项目,但是如果改成本机IP则会报错 通过localhost:8080访问效果 通过本机IP显示效果 如果想通过手机输入本机IP访问需要在package.json中配置 package.json配置 最后在手机通过IP就可以访问到webApp,或借助草料二维码生成修改后项目地址的二维码,掏出手机扫一扫即可~ 通过机IP访问效果 Tips:需要手机和电脑在一个局域网(wifi)下 总结 以上所述是小编给大家介绍的vue在手机中通过本机IP地址访

  • Nginx解决vue项目服务器部署及跨域访问后端详解

    Nginx解决vue项目服务器部署及跨域访问后端详解

    目录 准备 1.前端代码注意事项: 2.虚拟机的Nginx配置关键点: 测试 总结 准备 (1)首先是一个Vue项目. (2)其次准备好服务器(在这里我是用虚拟机VMware). (3)准备好一个SpringBoot后端代码. (4)服务器上必须安装Nginx. 1.前端代码注意事项: (1)在这里我是用vuecli3脚手架创建的vue项目的,所以项目创建完毕之后是没有vue.config.js的. 其实这个文件的创建是为了本地测试解决前后端跨域问题的,但是在打包项目的时候需要把这里关于跨域的代

  • 解决webpack无法通过IP地址访问localhost的问题

    1.问题描述: 今天用 webpack (v1.14.0)配置本地服务,为了能在移动端预览开发效果,需要通过 IP 地址生存二维码然后手机扫描访问.却发现不能通过 ip 访问 localhost. 2.解决方案: 经多方查询,在 npm run dev 时添加参数 --host 0.0.0.0即可. 以上这篇解决webpack无法通过IP地址访问localhost的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 参考地址:https://github.com/

  • vue项目中data数据之间互相访问的实现

    vue项目中data数据之间互相访问的实现

    如下代码: <div id="vue_det"> <input type="number" v-model="text"> <div>{{textAdd}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { text: 1, tex

随机推荐