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 ...
随机推荐
- 【JZOJ3854】【NOIP2014八校联考第2场第2试9.28】分组(group)
MEi Bsny所在的精灵社区有n个居民,每个居民有一定的地位和年龄,ri表示第i个人的地位,ai表示第i个人的年龄. 最近社区里要举行活动,要求几个人分成一个小组,小组中必须要有一个队长,要成为队长 ...
- 微信公众号系统在Linux下的部署操作
ps -ef | grep tomcat 查看tomcat进程
- Leetcode811.Subdomain Visit Count子域名访问计数
一个网站域名,如"discuss.leetcode.com",包含了多个子域名.作为顶级域名,常用的有"com",下一级则有"leetcode.com ...
- PHP汉字验证码
转自:http://www.blhere.com/1167.html 12345678910111213141516171819202122232425262728293031323334353637 ...
- Ubuntu+Apache+PHP+Mysql环境搭建(完整版)(转)
http://www.2cto.com/os/201505/401588.html Ubuntu+Apache+PHP+Mysql环境搭建(完整版) 一.操作系统Ubuntu 14.04 64位,阿里 ...
- Vue.js 第1章 Vue常用指令学习
今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...
- Streamy障碍一:大批量条目
- HZOJ 旋转子段
作者的正解: 算法一:对于30%的数据: 直接枚举区间直接模拟,时间复杂度O(N3). 算法二:对于60%的数据:枚举旋转中心点,然后再枚举旋转的端点, 我们可以用O(n)的预处理求前缀和记录固定点, ...
- Laravel如何引用第三方(自定义)库
想做一个网页抓取的功能,底层使用php的laravel框架. 这里使用phpQuery库来实现网页抓取,这里不做介绍. 需要了解的可以百度,或者等我填坑. 下载最新版本可以前往https://code ...
- hdu 3068 最长回文 (Manacher算法求最长回文串)
参考博客:Manacher算法--O(n)回文子串算法 - xuanflyer - 博客频道 - CSDN.NET 从队友那里听来的一个算法,O(N)求得每个中心延伸的回文长度.这个算法好像比较偏门, ...