如何在移动端访问本地vue的项目？

最新推荐文章于 2024-04-26 16:49:42 发布
最新推荐文章于 2024-04-26 16:49:42 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 实用方法 文章标签： 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnailili/article/details/106964712
版权

现如今移动端异常火爆，今天工作中需要写一个自定定位城市的功能，虽然浏览器也可以看到移动端的样式，但是自己心里还是不靠谱（devicemotion监听设备速度变化，deviceorientation监听设备方向变等事件）也必须在移动端预览效果

那如何在移动端访问本地的项目？

1、必需手机电脑在相同WiFi下
2、查看WiFi下的IP地址 （命令：ipconfig）
在这里插入图片描述
3、更改config.js文件
在这里插入图片描述

4、重新运行vue项目，域名已经更改，在移动端运行自己的项目吧！

cnailili
关注
专栏目录
移动端项目（vue2+vant组件库）
qq_45585640的博客
06-23 7131
在命令行中输入以下命令创建 Vue 项目： 这里建议两个都选上，更严谨。 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。 安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如
Vue移动端项目（一）
qq_48687155的博客
08-20 3323
Vue移动端项目
Vue移动端项目实现使用手机预览调试操作
11-20
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，查看本地IPv4； 3.修改本地项目中IP地址 找到项目中config文件夹，下面index.js文件打开； 找到host: ‘localhost’, 改为上面本地IPv4地址； module.exports
手机端访问本地vue项目
最新发布
liuzaixi的博客
04-26 1308
devServer添加配置： host: “0.0.0.0”, disableHostCheck: true。注意不是在浏览器直接输入IP显示的那个外网IP地址。
手机访问本地vue项目
learn_daydayUp的博客
09-30 1177
手机访问本地vue项目 1.vue配置修改： 1》config ->index.js修改host 2》pa’ckage.json的dev加上–host 0.0.0.0 2.重启项目 此时用手机打开运行成功的链接。 注意：手机和电脑必须在同一局域网内（连接同一个无线网）。如果此时还打不开，就把防火墙全部关闭 个人纪录，方便回忆 ...
手机访问本地Vue项目
weixin_47540149的博客
05-08 886
在项目的package.json中 scripts下的dev中的后面加上–host 0.0.0.0
vue:手机访问本地项目
qq_45061461的博客
06-28 985
3.手机浏览器输入地址 : 电脑ip + 项目端口号(比如:8080)1.需要在项目根目录config文件夹中的index.js中配置。2.需要电脑的ip地址 需要在同一个局域网环境中。查看电脑 :IPv4 就是ip。
Vue移动端项目（二）
qq_48687155的博客
08-20 448
Vue移动端项目（二）
vue移动端项目搭建流程
侯光照的博客
01-05 1390
一、先对我们的项目进行基本的配置 首先在根目录下创建一个vue.config.js文件(用来配置我们的跨域等一系列问题) 配置多环境变量 package.json 里的 scripts 配置 serve stage build，通过 --mode xxx 来执行不同环境 通过 npm run serve 启动本地 , 执行 development 通过 npm run stage 打包测试 , 执行 staging 通过 npm run build 打包正式 , 执行 production "
vue-cli项目无法用本机IP访问的解决方法
12-11
所遇问题 启动vue-cli项目服务，用本机IP无法访问此网站，拒绝了我们的链接请求。从而无法从手机上预览效果 原因分析 在我们的bulid目录下有一个webpack.dev.config.js的配置文件，发现devServer对象里的host属性取自process.env.HOST || config.dev.host。 于是这里我们去查看config.dev.host。在我们的config目录下有一个index.js, 找到dev对象的host属性 发现该版本的vue-cli将host主机名定义为localhost, 从而导致了本地IP不能访问服务。 解决办法 将host重新定义为：0
手机如何访问vue项目localhost
少油少盐不要辣
04-03 865
在您的手机浏览器中输入您计算机的IP地址，加上Vue项目的端口号。（对于Mac/Linux）来查看计算机的IP地址。这将允许您在手机上访问本地主机上的Vue应用程序。的条目，这是计算机的本地IP地址。最后，还需要关闭电脑的防火墙设置。（对于Windows）或。来启动Vue开发服务器，
vue/cli3 使用手机访问本地项目
muzidigbig的博客
04-12 1905
vue-cli3 移除了 config 文件夹,多出一个 vue.config.js(===webpack.config.json) 的文件! 根据官方所描述: vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。 官方链接:https://cli.vuejs.org/zh/config/ 这里只写一下怎么使用手机访问vue的本地项目,多的我就不赘述了! 第一步: win+
让移动端设备访问本地项目
qq_34248133的博客
09-12 935
这里以 PHP 项目为例，前提：你本地的虚拟主机已经配置好了！~~~ 我知道的有两种方法： 第一种，通过访问 IP 的方式： 1）如果本地就一个项目的话，可以直接访问 IP 2）如果本地有多个项目的话，可以通过指定端口的方式访问 优点：基本不用怎么配置 缺点：如果有项目配置前后端域名分离的话，没办法了，只能用第二种方法。 第二种，通过访问本地虚拟主机定义的域名： 1）如果是电脑访问的话，可以直接修改 hosts 文件 2）如果是移动端的话，也是修改 hosts ...
前端Vue项目移动端访问
u010373973的博客
06-24 631
Localhost及ip地址访问Vue项目（移动端） （1）将host：'localhost’改为host:‘ip地址’ （2）在浏览器里面访问 （3）将浏览器ip地址转换为二维码，用手机扫描（手机需和电脑在同一个局域网内） ...
vue项目怎么在手机查看
豪先生的博客
09-24 4045
可能，我们连接同一个网络以后，在手机浏览器输入第二个网址，发现手机端还是不能访问服务。这时候我们把电脑的防火墙关闭一下就好了。一个是本地的，一个是网络的。在手机浏览器地址栏输入第二个网址（这个时候再重新用手机查看vue项目第二个网址，就可以查看项目。【注意】：我们的手机和开启服务的电脑要连入同一个网络。然后点击 公用网络，然后 关闭防火墙。启动一个项目之后，会出现两个网址，），我们可以在手机端查看我们的。选择-windows防火墙。点击电脑左下角的【设置】
手机访问电脑打开的vue项目
v_111的博客
04-14 4758
1，将手机连接到与电脑相同的WIFI2，更改vue项目config文件夹下的index.js的host地址。默认为“localhost”，更改为自己电脑的ip地址。3,npm run dev 运行项目，复制路径生成二维码。手机扫一扫即可。...
手机访问电脑端vue-cli项目——简单教程
Andy·Wu的专栏
04-18 922
手机访问电脑端项目的简单步骤如下所示： 1、确保手机和电脑连接在同一 wifi 上 2、修改 Vue CLI 配置： 项目根目录 --> config --> index.js 修改为如下图所示 3、运行 npm run dev，把项目网址转换为二维码即可通过手机扫一扫进行访问。 ...
如何在本地启动vue项目使用域名访问
AuraVic的博客
11-27 3474
小编今天产品上有一个需求，就是多个相同二级域名下的系统的要共享cookie，通过cookie来进行免密登录。那这个需求在本地我们如何调试呢？这就需要依靠本地启动一个服务通过域名来访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值