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/

原文地址:https://www.cnblogs.com/wiliam/p/11612536.html

时间: 2024-11-09 12:56:30

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

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

一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接用局域网 IP 访问,方法如下: 给 dev 添加--host 0.0.0.0 属性: "scripts": {   "dev": "webpack-dev-server --inline --progress --config build/webpack.d

VUE项目如何在移动端查看打印日志(console.log)

在项目中发现,由于移动端无法看到打印的信息,所以很难进行调试,也不知道问题出在哪里,后来找到了一个好用的插件:vConsole. 1.安装 npm install vconsole 2.在main.js中引入 import Vconsole from 'vconsole'; let vConsole = new Vconsole(); export default vConsole 编译你的vue项目,用移动端打开项目就可以看到绿色的vconsole图标 vconsole图标 点开这个图标,就能

[记录]解决vue项目当直接通过url访问中间页时nginx返回404的问题

应用为VUE单页应用,路由模式为history,web服务器为nginx,正常情况下如果直接通过url访问一个中间页(不是index.html)时,会看到nginx返回的404错误,这个问题目前我只能通过修改nginx站点配置文件来实现. 具体代码(只看红色加粗的部分就行): server { listen 80; server_name ……; index index.php index.html index.htm default.php default.htm default.html;

vue项目中h5移动端中通过flex布局实现首尾固定,中间滚动(借鉴)

html中 <div class="flexLayoutr"> <div class="div_head"></div> <div class="div_content">中间区域</div> <div class="div_foot"></div> </div> css中 *{ margin: 0; padding: 0; } .

Vue 项目部署到GitHub Pages并同步到Gitee Pages

前言:相信很多前端开发者都拥有自己的vue项目,若想把自己的项目做成网站分享给大家看,最常用的就是利用Github提供的GitHub Pages服务和Gitee提供的Gitee Pages服务.其中,Github是国外网站,Gitee是国内网站(访问速度较快).本文给大家介绍的是如何将 vue-cli 3.0+项目部署到github pages 并同步到 gitee Pages上. 一.服务说明与注意事项 在你的github项目设置的GitHub Pages项,有这么一句话: GitHub Pa

WinForm通用自动更新器AutoUpdater项目实战

一.项目背景介绍 最近单位开发一个项目,其中需要用到自动升级功能.因为自动升级是一个比较常用的功能,可能会在很多程序中用到,于是,我就想写一个自动升级的组件,在应用程序中,只需要引用这个自动升级组件,并添加少量代码,即可实现自动升级功能.因为我们的程序中可能包含多个类型的文件,比如exe.dll. config.xml.bat等等自定义格式的后缀名文件,所以要支持多文件类型的更新. 本期同样带给大家分享的是阿笨在实际工作中遇到真实项目场景,请跟随阿笨的视角去如何开发实现WinForm通用自动更新

如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html  原文网址 如何在Vue项目中使用vw实现移动端适配 作者:大漠 日期:2018-01-25 点击:10362 vw Layout 布局 Vue mobile 编辑推荐:使用 Coding.net 搭建静态博客,自定义域名,全站 HTTPS 加密,自动实时部署, 立即托管您的网站! 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页

转:如何在Vue项目中使用vw实现移动端适配

https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越受到众多浏览器的支持,因此在<再聊移动端页面的适配>一文中提出了vw来做移动端的适配问题.到目前为止不管是哪一种方案,都还存在一定的缺陷.言外之意,还没有哪一个方案是完美的. 事实上真的不完美

vue 项目通过本地访问

1.查询ip地址 win+R打开cmd 窗口 输入ipconfig 找到IPV4地址   192.168.x.xxx 2.在vue项目config文件夹中的index.js,将localhost换为ipv4地址 host: '192.168.x.xxx', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a fre