vue 同局域网访问不到的问题及解决

目录
  • vue 同局域网访问不到
    • 方法一
    • 方法二
  • vue项目配置在局域网下访问
    • 1.vue配置
    • 2.如果上述配置无法访问则配置以下

vue 同局域网访问不到

方法一

1. 处于同一个网段（PS：连同一个WiFi）

2. 重启本地环境 ：

(1)  yarn run dev --host 0.0.0.0(不需要修改配置文件)

(2)  npm run dev --host (需要修改config/index.js ，把 host: 'localhost', 改为 host: '0.0.0.0')

3. 你电脑的IP + 本地项目的端口号 别人打开这个就可以访问你本地项目了（类似于：192.168.100.100:8089 ）

方法二

修改package.json文件添加

 --host 192.168.1.199

vue项目配置在局域网下访问

1.vue配置

a.vue cli2.0配置如下

b.vue cli3.0不需要配置即可访问

2.如果上述配置无法访问则配置以下

需要配置一下电脑的防火墙，把所需的端口（如：8080）打开。

设置方法如下：

2.1  Windows 10 ，搜索“控制面板”，打开，Windows 7 可以直接在开始菜单打开。

2.2  点击“Windows Defender防火墙”——“高级设置”——新建“入网规则”。

2.3 规则类型选择“端口”

2.4 下一步“特定本地端口”填 8080-8088 （此处是一个 IP 段，因为如果打开多个项目，端口会被占用， Vue会自动分配一个新的端口。如：8081 ）。

2.5下一步“允许连接”

2.6下一步选择开放的场景，注意一定要选前两个

2.7下一步输入规则名称，点击“完成”即可

这样用手机访问电脑 IP 加端口号，192.168.1.11:8080 就可以打开项目了。

注意：手机和电脑必须在同一局域网下才能访问，同事电脑同理

获取IP 方法：

打开命令提示行工具，输入 ipconfig 回车, 就可以看到自己的IP了，比如我的 192.168.2.103 。

这样更加方便真机调试，无需部署到服务器就可以进行访问和测试。

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

赞 (0)

相关推荐

  • webpack vue项目开发环境局域网访问方法

    思路:将自己的项目启动ip与端口固定,当然端口也可以为默认的8080 步骤: 1.查看自己在局域网内的ip 命令行 ipconfig 2.回到自己的开发目录,在根目录找到comfig/index.js 修改 host: 自己的局域网ip 修改 port: 自定义端口-最好不要用80或者其他常用端口 示例:comfig/index.js host:'http://192.168.2.153',//一定要加上 http port:3000 注意:此处ip一旦固定,本机访问的或localhost将不可

  • vue项目配置同一局域网可使用ip访问的操作

    1.检查 package.json文件,scripts.dev设置 host改成 "0.0.0.0" 2.config文件中找到 index.js 文件的host改成 "0.0.0.0" 此处的"0.0.0.0"可以改成自己的ip,重启项目就可以了 补充知识:@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug,用

  • 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-cli启动本地服务局域网不能访问的原因分析

    1.问题描述: 本地vue-cli启动了一个项目只能通过localhost:8080访问到,同一局域网下其他的手机和电脑并不能通过ip地址访问调试, 2.原因:vue-cli项目是通过命令行一键生成的,配置文件中默认生成的是本地调试模式,默认访问地址是localhost:端口号 3.改正的方式 找到config文件夹下的index.js文件,修改host:"localhost"为 host:"0.0.0.0",此时同一局域网下的手机和其他电脑能通过ip查看到页面 P

  • vue 同局域网访问不到的问题及解决

    目录 vue 同局域网访问不到 方法一 方法二 vue项目配置在局域网下访问 1.vue配置 2.如果上述配置无法访问则配置以下 vue 同局域网访问不到 方法一 1. 处于同一个网段(PS:连同一个WiFi) 2. 重启本地环境 : (1)  yarn run dev --host 0.0.0.0(不需要修改配置文件) (2)  npm run dev --host (需要修改config/index.js ,把 host: 'localhost', 改为 host: '0.0.0.0') 3

  • docker中使用mongodb数据库详解（在局域网访问）

    docker中使用mongodb数据库详解（在局域网访问）

    前言 有了docker,基本上就告别了各种软件.数据库的安装,直接从镜像库pull下来,爽,想想以前那真是一个遭罪啊. 这文章就来看一下如何跑mongo的docker镜像,并且可以在局域网访问,内容相对简单,也是记录我的自学过程. 第一步 获得mongo镜像,命令如下, # 拉取mongo镜像 docker pull mongo # 查看本地库mongo镜像 docker images mongo 第二步 启动mongo镜像,如下 # 启动mongo镜像 docker run -itd -P -

  • Vue axios设置访问基础路径方法

    看过axios的官方文档后配置变得简单: 在main.js 做如下配置: import axios from 'axios' axios.defaults.baseURL = 'http://10.202.42.24:8080/sf-cloud-web' Vue.prototype.axios = axios 最后一行是将axios配置到Vue原型中,使用方法为: this.axios.get('/test/1').then(function (response) {}) 可能会遇到下面的报错:

  • 解决Vue打包后访问图片/图标不显示的问题

    大家可否遇到过 npm run build 打包后,项目在线上运行时,资源文件 (图片.图标)不显示 的问题, 接下来,我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件 打开此文件后你会头晕,因为都是打包压缩过的css代码,不过没关系 ,关键字搜索url 检查该url路径是否匹配正确 对比后惊人发现!!! 因此在url路径前添加../../就OK了, 但是 很麻烦,每次打包后都要进行二次加工吗? 并不是!!! 2.自动添加 ../../ 的方法 打开build/utils.j

  • vue webpack开发访问后台接口全局配置的方法

    在实际开发中,使用vue 后就是前后端分离开发了,这时候我们就需要访问后台的接口来拿到数据,需要URL,name,password来获取到token才能正常使用接口,下面就来配置. 1.找到config文件夹,在prod.env.js中添加一下代码(若没有此JS,自己创建一个就可以了) 'use strict' module.exports = { NODE_ENV: '"production"', API_ROOT: '"//123.116.245.150:18081/ap

  • Vue打包后访问静态资源路径问题

    Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们知道,执行npm run build 后会生成dist文件夹,把里面的index.html在浏览器运行会发现 图片路径出错啦!!! 解决方法: 1.先找到config下的index.js文件 把最后的'/' 改为 './' 2.接着把图片地址改为 以上就是Vue打包后访问静态资源路径问题的相关知识点,感谢大家的阅读和对我们的支持.

  • vue设置全局访问接口API地址操作

    在使用vue框架进行前后端分离项目开发时,通常涉及到与后段接口进行交互,平时一般使用比较多的就是用axios来实现调用后段接口,写法一般为 xxx() { const _this = this axios.get("http://ip:port/xx/xx").then(function (resp) { .....//省略 }) } 但是有一个比较普遍的问题就是,假如我们后端接口地址改变了,或者是网络地址发生了变化,就需要在上面IP以及端口的位置每一处都需要修改,所以我们需要一个一处

  • docker中使用mysql数据库实现局域网访问

    docker中使用mysql数据库实现局域网访问

    1.获取mysql镜像 docker pull mysql:5.6 注意:此处之所以获取mysql5.6是因为mysql5.7在centos7中启动可能会报错 2.查看镜像列表 docker images 3.启动mysql镜像 docker run -itd -P mysql:5.6 bash 其中 docker run是启动容器的命令:i是交互式操作,t是一个终端,d指的是在后台运行, -P指在本地生成一个随机端口,用来映射mysql的3306端口,mysql指运行mysql镜像,bash指

  • Vue使用Proxy代理后仍无法生效的解决

    vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑: 配置完代理后请一定重新执行(重要,非常重要!) npm run dev 若重新执行命令后,代理仍为生效,请按下方步骤进行检查: 检查index.js文件中的代理是否配置正确,示例如下: proxyTable: { '/api': { //代理标识 target: 'http://xxx.xxx.xxx',//指向的实际地址 changeOrigin: true, // 允许跨域 pathRewrite: { // 标识替换 // 原

随机推荐