在写vue的项目中时,虽然vue会自动更新页面,但是切换页面切来切去也很麻烦,有时候我们还要在公司另一台电脑或者手机上调试,这时候利用browser-sync插件,无需改动vue的代码即可实现:

1. 首先确保安装了node (命令行node -v 可以查看)

2.全局安装 browser-sync      npm install -g browser-sync (项目中局部安装  npm install --save-dev browser-sync)

3.启动vue项目 npm run dev

4.让localhost:8080服务开着,然后到项目文件中使用git bash 或者cmd 输入:

browser-sync start --proxy 'localhost:8080' --files '**'

成功后显示:

5. 这时候localhost:3000就是你项目被监听的地址,把localhost换成你的电脑ip地址(比如: http://192.168.1.18:3000/),然后在同一个局域网下,手机,电脑都可以实时显示你的项目啦,就这么简单,无需改动源码

附上 browser-sync 文档地址:http://www.browsersync.cn/

vue 项目使用局域网多端访问并实时自动更新(利用 browser-sync)的更多相关文章

  1. Vue项目无法使用局域网IP直接访问的配置方法

    一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接 ...

  2. vue项目 既能通过ip访问项目,又可以本地localhost访问

    1.场景问题: 有时候开发过程中,vue项目需要其他同事能访问你本地进行调试,而不是需要重新拉取代码来启动很麻烦 2.解决思路: 一. package.json"dev": &qu ...

  3. webstrom vue项目让局域网访问

    vue项目package.json "dev": "webpack-dev-server --inline --progress --config build/webpa ...

  4. vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题

    本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...

  5. 【转】vue项目打包部署——nginx代理访问

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...

  6. vue2.0 — 移动端的输入框实时检索更新列表

    我们都是行走在这世界的孤独者 - 暖暖 最近在做vue2.0的项目遇到一个移动端实事检索搜索更新列表的效果,但用户在搜索框输入客户的电话或姓名的时候,客户列表内容会做相应的更新,下面给大家看下图~· ...

  7. Vue 项目 在局域网内访问

    之前在百度上看到过很多中  关于局域网访问项目的方法, 在这里,个人推荐两种比较喜欢的方法 一.直接在项目的package.json文件中进行配置 ,代码如下 "scripts": ...

  8. 利用HBuilder将vue项目打包成移动端app

    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...

  9. vue项目中,localhost可以访问,IP无法访问的问题

    用http://localhost:8082/可以访问,但是换到ip就访问不了,127.0.0.1.0.0.0.0访问也可以,就ip不行 根源----在config里面的index.js里面的modu ...

随机推荐

  1. 【JZOJ4935】【NOIP2017GDKOI模拟1.12】b

    Boring 构造一棵包含1号结点的连通子集个数刚好为给定的n的树. 这棵树的结点不能多于60. 1<=n<=109 Gai 容易得到,计算给定一棵树的Ans1,其中Ansi表示包含i号结 ...

  2. TCP/IP 协议栈学习代码

    全部代码 直接使用socket 客户端 import java.io.*; import java.net.Inet4Address; import java.net.InetSocketAddres ...

  3. shell学习(21)- tr

    Linux tr 命令用于转换或删除文件中的字符. tr 指令从标准输入设备读取数据,经过字符串转译后,将结果输出到标准输出设备. 在tr中利用集合的概念,可以轻松地将字符从一个集合映射到另一个集合中 ...

  4. linux cat /etc/passwd 说明

    通常在Linux系统中,用户的关键信息被存放在系统的/etc/passwd文件中,系统的每一个合法用户账号对应于该文件中的一行记录.这行记录定义了每个用户账号的属性.下面是一个passwd文件的示例( ...

  5. C++2:函数与传递

    C++2:函数与传递 赵强 201831061427 目录   一.函数   二.函数重载   三.值传递   四.地址传递   五.递归函数 一.函数   我们在代码编译中常常会用到函数,函数是模块 ...

  6. Light OJ 1272 Maximum Subset Sum 高斯消元 最大XOR值

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u011686226/article/details/32337735 题目来源:problem=12 ...

  7. Spring data jpa hibernate:查询异常java.sql.SQLException: Column '列名' not found

    使用spring boot,jap,hibernate不小心的错误: java.sql.SQLException: Column '列名' not found: 这句话的意思是:找不到此列 为什么会出 ...

  8. WPF中的简单水动画

    原文 https://stuff.seans.com/2008/08/21/simple-water-animation-in-wpf/ 很多年前(80年代中期),我在一家拥有Silicon Grap ...

  9. Tcp之双向通信

    TestServer.java package com.sxt.tcp; /* * 服务端 */ import java.io.DataInputStream; import java.io.Data ...

  10. P2P四红线

    P2P四红线 刘张君指出,P2P网络借贷平台是一种新兴金融业态,在鼓励其创新发展的同时,要记住四点:一是要明确这个平台的中介性质,二是要明确平台本身不得提供担保,三是不得将归集资金搞资金池,四是不得非 ...