文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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进行局域网访问时注意

设置完成即可使用其它设备在同一局域网下进行访问了

注意:

如果更换了网络状态,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 查看

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯