在写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. Oracle存储过程基本语法及基础教程

    存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 IS 3 BEGIN 4 NULL; 5 END; 行1: CREATE OR REPLACE PROCEDURE ...

  2. 【OI】快读

    不必多说. #include <cstdio> #include <cstring> int read(){ ,f = ; char c = getchar(); ') { ; ...

  3. objectarx之画多段线和画直线

    void CCommonFuntion::DrowPloyLine(AcGePoint2dArray& inputpoints){ if (inputpoints.length() < ...

  4. hdu5437 优先队列 长春网赛

    优先队列做,然后遍历人数. #include <queue> #include <stdio.h> #include <string.h> #define maxn ...

  5. Python中的简单实现UDP协议没有粘包问题

    服务端: import socket server=socket.socket(socket.AF_INET,socket.SOCK_DGRAM) #数据报协议->udp server.bind ...

  6. 使用 Captcha 扩展包 为 Laravel 5 应用生成验证码

    http://laravelacademy.org/post/3910.html 1.安装 我们通过 Composer 安装 Captcha 扩展包: composer require mews/ca ...

  7. React Native中pointerEvent属性

    在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认 ...

  8. 洛谷P1049 装箱问题

    //01背包 价值等于体积 求所剩最小体积 #include<bits/stdc++.h> using namespace std; ; ; int c,n,v[maxn],f[maxv] ...

  9. WPS修订功能的使用

    WPS设置 设置用户名: 修改之后的效果:

  10. AtCoder Regular Contest 060

    C - 高橋君とカード / Tak and Cards 思路:dp,先说说我想的,我写的dp数组是dp[i][j][k],表示从前i个数字中,选择j个数字,平均值为k,则dp[i][j][k] = d ...