正常开发中有时间提测比较麻烦。通常让测试小姐姐连接开发本地开启的服务器访问本地项目(在同一局域网下)。

其实一般项目IDE已经实现这些功能例如webstorm和vscode,有时候需要单独配置下。

但是Vue项目在本地开发环境中他们就没办法通过IDE去开启服务器,一般都是是vue-cli脚手架开启服务器的这时候就需要我们做些特别的配置了。

首先需要获取自己的ip,我本人使用mac 在iterm中输入 ifconfig en0 可以拿到自己的IP

inet 10.101.2.43

window系统过通过win+r 输入cmd 打开命令窗口 输入dos命令 ipconfig 即可

然后打开本地项目在根目录找到package.json文件对scripts下的dev在后面加上 --host 10.101.2.43(本地IP)

package.json是这个项目模块的描述文件,scripts对应的是npm脚本命令。例如我们运行项目是 npm run dev

其实执行的是vue-cli-service serve --development --host 10.101.2.43

这样的话我们就可以通过http://10.101.2.43:8083/去访问本地项目(ps:一定是在同意局域网下的)

Vue笔记--同局域网下访问本地项目的更多相关文章

  1. day06-初识Vuetify框架UI框架和使用域名访问本地项目

    本项目的笔记和资料的Download,请点击这一句话自行获取. day01-springboot(理论篇) :day01-springboot(实践篇) day02-springcloud(理论篇一) ...

  2. leyou_02_nginx使用域名访问本地项目

    1.nginx的搭建依赖环境 1.1 准备jdk环境 当前最新版本下载地址:http://www.oracle.com/technetwork/java/javase/downloads/index. ...

  3. XAMPP 虚拟主机配置,实现多域名访问本地项目

    XAMPP 虚拟主机配置,实现多域名访问本地项目 1.首先你既然要配置多个虚拟主机,那你肯定需要多个站点的目录文件.你可以在e盘创建 www文件夹,然后在该文件件中新建两个站点目录,假设test.co ...

  4. Mac设置外网访问本地项目

    > 官网地址:https://ngrok.com/download 步骤(官网基本已经说明了步骤,但还不完善,以下为亲测步骤): 下载并注册账号 打开终端,进入ngrok.zip所在文件夹(方法 ...

  5. 017 使用域名访问本地项目---涉及switchhost和Nginx

    1.统一环境 我们现在访问页面使用的是:http://localhost:9001 实际开发中,会有不同的环境: 开发环境:自己的电脑 测试环境:提供给测试人员使用的环境 预发布环境:数据是和生成环境 ...

  6. 局域网下访问其他计算机搭建的django网页

    1.修改工程目录下的setting.py 文件 ALLOWED_HOSTS = ['*'] #*表示允许访问的ip 如果是添加* 则允许所有同局域网环境的主机访问 2.在完成的django工程下运行以 ...

  7. 用手机或外部设备在同一局域网下访问虚拟主机wampsever的方法版本号是2.4.9

    1,首先在虚拟服务器电脑上可以打开http://localhost/ 2,在外部设备访问时报错为:You don't have permission to access / in on this se ...

  8. Apache虚拟主机配置,实现多域名访问本地项目PHP空间,以及配置403Forbidden等错误的解决办法

    第一步: apache主配置文件修改: 用文本编辑器打开apache的conf目录下 httpd.conf 将下面以下代码取消注释 LoadModule rewrite_module  modules ...

  9. 手机APP应用外网访问本地WEB应用

    手机APP应用外网访问本地WEB应用 本地安装了WEB服务端,手机APP应用只能在局域网内访问本地WEB,怎样使手机APP应用从公网也能访问本地WEB? 本文将介绍具体的实现步骤. 1. 准备工作 1 ...

随机推荐

  1. React教程:4 个 useState Hook 示例

    摘要: React示例教程. 原文:快速了解 React Hooks 原理 译者:前端小智 到 React 16.8 目前为止,如果编写函数组件,然后遇到需要添加状态的情况,咱们就必须将组件转换为类组 ...

  2. redis和memcached的对比

    redis:① 支持的数据结构比较多 ② 支持集群 ③ 支持数据持久化,RDB.AOF ④ 单个value最大值512MB      ⑤ 单核 memcached: ① 支持K/V结构的数据 ② 不支 ...

  3. Linux—yum使用详解

    yum配置 yum的配置文件在  /etc/yum.conf  参考:https://www.cnblogs.com/yhongji/p/9384780.html yum源配置 yum源文件在 /et ...

  4. emacs require和provide

    Emacs的默认配置文件是.emacs,Emacs启动时会读取并执行.emacs中的LISP代码,用户使用.emacs达到自己的Emacs初始化配置目的. 不过单独使用.emacs有一个问题,因为时间 ...

  5. win10python安装iis

    django部署iis https://www.cnblogs.com/guangang/articles/9268644.html python部署iis https://www.cnblogs.c ...

  6. luoguP3258 [JLOI2014]松鼠的新家

    树上差分 树上差分分析 使点x到点y的路径上(链上),全加上一个值,可以选择使用树上差分(不用线段树乱搞.... 首先,和普通的差分一样,要有一个tag.然而,对于一个结点,我们需要求出它全部儿子的t ...

  7. 面向对象程序设计(JAVA) 第11周学习指导及要求

    2019面向对象程序设计(Java)第11周学习指导及要求 (2019.11.8-2018.11.11)   学习目标 理解泛型概念: 掌握泛型类的定义与使用: 掌握泛型方法的声明与使用: 掌握泛型接 ...

  8. python如何实现元素等待

    一.为什么要元素等待? 在UI自动化过程中,元素的出现受网络环境.设备性能等多种元素影响.因此,元素加载和脚本运行到该元素的时间不一致,会报错:元素无法定位. 简单举下例子:实际UI自动化测试中,点击 ...

  9. SpringBoot 全局异常配置

    在日常web开发中发生了异常,往往是需要通过一个统一的异常处理来保证客户端能够收到友好的提示. 一.默认异常机制 默认异常处理(SpringBoot 默认提供了两种机制,一种是针对于web浏览器访问的 ...

  10. Testng 简介

    Testng是一套开源测试框架,是从Junit继承而来,testng意为test next generation,主要有以下特性: annotations  注释,如 @test @BeforeMet ...