vue 项目使用局域网多端访问并实时自动更新(利用 browser-sync)
在写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)的更多相关文章
- Vue项目无法使用局域网IP直接访问的配置方法
一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接 ...
- vue项目 既能通过ip访问项目,又可以本地localhost访问
1.场景问题: 有时候开发过程中,vue项目需要其他同事能访问你本地进行调试,而不是需要重新拉取代码来启动很麻烦 2.解决思路: 一. package.json"dev": &qu ...
- webstrom vue项目让局域网访问
vue项目package.json "dev": "webpack-dev-server --inline --progress --config build/webpa ...
- vue项目打包 部署nginx服务器 访问远程接口 本地json 跨域问题
本文建立在你已经在windows7上已经配好了nginx的前提下进行!!! 如果没有请移步至:https://www.cnblogs.com/jack1208-rose0203/p/5739765.h ...
- 【转】vue项目打包部署——nginx代理访问
我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要 ...
- vue2.0 — 移动端的输入框实时检索更新列表
我们都是行走在这世界的孤独者 - 暖暖 最近在做vue2.0的项目遇到一个移动端实事检索搜索更新列表的效果,但用户在搜索框输入客户的电话或姓名的时候,客户列表内容会做相应的更新,下面给大家看下图~· ...
- Vue 项目 在局域网内访问
之前在百度上看到过很多中 关于局域网访问项目的方法, 在这里,个人推荐两种比较喜欢的方法 一.直接在项目的package.json文件中进行配置 ,代码如下 "scripts": ...
- 利用HBuilder将vue项目打包成移动端app
事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsP ...
- vue项目中,localhost可以访问,IP无法访问的问题
用http://localhost:8082/可以访问,但是换到ip就访问不了,127.0.0.1.0.0.0.0访问也可以,就ip不行 根源----在config里面的index.js里面的modu ...
随机推荐
- Directx11教程(35) 纹理映射(5)
原文:Directx11教程(35) 纹理映射(5) 到现在为止,我们的TextureClass初始化函数非常简单,说白了就是一行代码: result = D3DX11CreateShader ...
- SharePoint开发中怎样使用Visual Studio给你的Web Part加入图标
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u012025054/article/details/36051545 SharePoint开发中怎样 ...
- 实现一个简易的promise
//promise里面只有三个状态,且三个状态的转换形式有两种 //由pending转换为fulfilled,由pending转换为rejected //Promise的构造函数参数是一个函数,函数的 ...
- margin负边距的使用(超简单)
写在开头: 在css的世界中,一切都是框,所有的框都处于流动的状态 margin负边距可以使文档流发生偏移 在没有设置margin-bottom的时候,parent的高度会跟随child的内部元素 ...
- 【NS2】各种TCP版本 之 TCP Tahoe 和 TCP Reno(转载)
实验目的 学习TCP的拥塞控制机制,并了解TCP Tahoe 和 TCP Reno的运行方式. 基础知识回顾 TCP/IP (Transmission Control Protocol/Interne ...
- Ubuntu18.10创建软件图标
解压下载包都/opt目录 创建并编辑/usr/share/applications/xxx.desktop [Desktop Entry] Encoding=UTF-8 Name=Pycharm Co ...
- SharpDX初学者教程第2部分:创建窗口
原文 http://www.johanfalk.eu/blog/sharpdx-tutorial-part-2-creating-a-window 在第二篇教程中,我们将介绍如何创建一个稍后将呈现的简 ...
- 【批量添加】-拼接sql字符串 标签: 批量添加 2015-12-13 17:49 2070人阅读 评论(33)
现在做的一个项目需要用到批量添加,但是封装的底层没有这个方法,所以自食其力,自己来写.我们用的是拼接sql字符串的方法来实现功能. 具体实现流程:首先将需要的数据存储到实体的list中,然后将这个li ...
- Firefox浏览器怎么安装adobe flash player插件
https://jingyan.baidu.com/article/0a52e3f435d171bf62ed7237.html 有些朋友在使用Firefox火狐浏览器,但是火狐浏览器安装以后是没有fl ...
- MapReduce数据流-输出