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

其实一般项目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. 【转载】Gradle for Android 第五篇( 多模块构建 )

    Android studio不仅允许你为你的app和依赖库创建模块,同时也可为Android wear,Android TV,Google App Engine等创建模块,而这些单独的模块又可以在一个 ...

  2. 【微信小程序】App.js生命周期

    1.小程序的生命周期-App.js App() 必须在 app.js 中注册,且不能注册多个.所以App()方法在一个小程序中有且仅有一个. App({ onLaunch: function () { ...

  3. curl smtp libcurl 邮件功能使用

    /* * For an SMTP example using the multi interface please see smtp-multi.c. */ /* The libcurl option ...

  4. NetCoreAPI添加Swagger

    public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; ...

  5. express 将 Router 实例模块化

    为了更好的组织代码,将 Router 实例进行模块化,将 get / post 等快捷方式放在Router上,而不是 App 上,然后将该 Router 作为中间件,use 到 server.js 上 ...

  6. MYSQL第一课

    rm-rf /* 不能用 完全删除 数据库不能直接存储数据 table 表 DB 数据库 DBMS 数据库操作系统 SQL 结构化查询语言 语句不区分大小写,但字符串常量区区分大小写.建议命令大写. ...

  7. C学习笔记（8）--- 文件读写

    1.C 文件读写: 一个文件,无论它是文本文件还是二进制文件,都是代表了一系列的字节.C 语言不仅提供了访问顶层的函数,也提供了底层(OS)调用来处理存储设备上的文件. a.打开文件: FILE *f ...

  8. 1. Go语言—初始

    一.golang语言特性 1. 垃圾回收 内存自动回收,再也不需要开发人员管理内存 开发人员专注业务实现,降低了心智负担 只需要new分配内存,不需要释放 2. 天然并发 从语言层面支持并发,非常简单 ...

  9. Centos 7 自动安装系统-pxe

    一.简介 PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服 ...

  10. Pwnable-fd

    打开Ubuntu输入ssh fd@pwnable.kr -p2222,连接之后输入密码guest 之后就是ls -l看看里面的文件和权限,fd.fd.c.flag 看看fd.c的源码 #include ...