vue项目如何在手机上面做测试

最新推荐文章于 2025-04-17 21:13:16 发布
最新推荐文章于 2025-04-17 21:13:16 发布
阅读量1.4w 收藏 26
点赞数 5
分类专栏： vue 文章标签： 手机测试 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jingjingshizhu/article/details/82146255
版权
本文介绍了在电脑和手机上访问Vue项目的方法。在电脑上，需在项目的config/index.js中修改host为电脑IP地址，重新运行项目即可通过对应网址访问。在手机上，要保证与电脑在同一局域网，可修改wifi代理，之后在浏览器输入对应网址访问项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

做好了vue项目，然后想在手上跑一遍

 

 

  1. 在项目的config/index.js中修改host为自己电脑的ip地址：
  2.  如果不知道自己电脑的ip地址的话，可进入cmd命令，输入ipconfig便可看到自己的ip地址：
  3. 然后就重新运行一下vue项目，便可以通过http://ip地址:8080/来访问。例如你的ip地址为192.176.56.87，你就可以在浏览器中输入http://192.176.56.87:8080/来访问vue项目了

如果想在手机上的浏览器访问，就要保证手机和电脑是在用一个局域网下面。可以通过修改wifi的代理来达到这一效果。

 

修改wifi的代理步骤如下：

手机连上某个wifi，然后点击“修改网络”，再选择“显示高级选项”，点击“代理”，选择“手动”，然后输入ip地址和端口，点击保存即可。成功后可在浏览器中输入http://192.176.56.87:8080/来访问vue项目

 

 

Vue.js手机端编程设置指南
CodeWWWCode的博客
09-22 479
它提供了许多方便的工具和功能，使得在手机端开发Vue.js应用程序成为一项相对简单的任务。在Vue.js中，你可以使用各种移动端UI组件库来构建漂亮的移动应用界面。一个常用的移动端插件是Vue-Touch，它为Vue.js应用程序提供了移动端触摸事件处理的能力。在这个例子中，我们在Vue.js模板中使用了Vant的按钮组件，并在按钮被点击时触发了一个方法。现在，你可以在Vue.js模板中使用Vant组件了。现在，你的Vue.js应用程序已经具备了移动端触摸事件处理的能力。步骤一：创建Vue.js项目。
Vue项目实战-vue2(移动端)
m0_57860459的博客
03-07 9426
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) axios拦截器(背诵) (八) Sticky 粘性布局 (九) 图片懒加载 (十) 全局注册组件 (十一) slot插槽 (十二) 使用ui库需要关注的三点 (十三) 三种路由传参方式(背诵) (十四) 模拟数据 (十五) 计算属性computed和属性观察watch (十
网页的Vue项目怎么在手机上面测试
荆轲刺秦王
09-16 408
注意：以下操作必须保证你的手机与电脑在同一局域网下 1.修改config文件夹下面的index.js文件 找到host: ‘localhost’,修改为：host: ‘0.0.0.0’ module.exports = { dev: { ...... host: 'localhost', // can be overwritten by port: 8080, // c...
VUE2创建项目
最新发布
csdn_HPL的博客
04-17 2483
模式：URL 中会带有 “#” 符号，如http://example.com/#/home ，“#” 后面的部分是路由的路径，它的改变不会引起页面的重新加载，浏览器会根据 hash 值的变化触发hashchange事件，Vue Router 利用这个特性实现路由跳转。：也是一款流行的 CSS 预处理器，和 Sass 类似，提供变量、混合、嵌套规则等功能，语法简洁，在大型项目中使用可以有效组织和管理 CSS 代码，并且与许多前端框架和构建工具都有良好的集成。：代表 Vue 2 版本。
vue项目如何在手机上做测试调试
weixin_45108907的博客
02-18 2212
1，在config文件加下的index.js的host地方，改成电脑的ip地址 2，可进入cmd命令，获取本地的IP地址 3，重启一下项目，vue-cli2使用npm run dev 即可 4，可以使用二维码，微信扫一扫调试项目 5，如果想在手机浏览器中调试， 一，保证在同一局域网下，手机和电脑使用同一个WiFi网络， 二，然后输入ip地址和端口，点击保存即可。成功后可在浏览器中输入http...
Vue移动端项目实现使用手机预览调试操作
11-20
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi...
vue项目打包做app模拟真机测试 无法请求后台服务接口（axios配置）
祈盼的博客
04-14 1941
vue项目打包做app模拟真机测试 无法请求后台服务接口 背景：本地的测试使用的是反向代理，可以不用管目标地址问题，但是打包成apk测试却不可以，需要使用目标地址，而且在开发的代码中无法实现跨域，打包后是找不到接口的 原本的写法： //配置http.js文件 import axios from 'axios' const instance = axios.create({ timeout: 60000, headers: { 'Content-Type': 'application/jso
Vue 项目实战——如何在页面中展示 PDF 文件以及 PDFObject 插件实战
热门推荐
黛琳ghz的博客，期待你的关注。
11-21 4万+
在之前的两篇关于 Print.js 文章中，我们已经初步学习了打印插件 Print.js 的使用，既然涉及到 PDF 的打印，如果想要预览 PDF 后再进行打印应该怎么做呢，接下来通过这篇文章记录一下 Vue 项目实战中，在页面中展示 PDF 文件的一些例子。
Vue移动端项目（一）
qq_48687155的博客
08-20 3473
Vue移动端项目
vue 项目在手机上调试
weixin_47409897的博客
01-08 551
vue 项目在手机上调试 cmd，打开自己电脑终端，输入ipconfig，就能看到自己电脑的ip地址了 vue.config.js文件 module.exports = { devServer: { host: '192.168.1.6', // 将浏览地址的本地服务修改为本机ip地址，用来到手机上测试 port: 8080, //端口号 }, } 然后项目启动的时候，直接访问：Network: http://10.0.XXX/
Vue项目在移动端调试办法
yodoyskts的博客
08-20 710
记录一下有些同学在写项目的时候不可避免的会在移动端展示，但是移动端又无法看到后台的参数和接口调用情况，本篇文章提供一个最简便便捷的办法供大家参考：通过vConsole来调试。引入完成之后重启一下项目就会在项目中出现一个vConsole的标签：如下图。这样在移动端想调试项目的时候点击这个标签就会打开vconsole的调试。当然在发版的时候记得把man.js里的vconsole注释掉哦。第二步：在man.js中引入vConsole。第一步：安装vConsole。
vue移动端真机调试方法
m0_37680500的博客
05-11 4672
最近开发手机移动端拍照、多图上传，OCR识别、连拍等功能都需要用到手机的物理硬件（定位、相机、相册、麦克风），调试就需要在真机环境中实现。真机环境调试起来就非常的不方便，例如：1、无法看到日志信息2、无法实时调试（每次都要打包到线上才可测试）下面教程提供一下移动端的调试方法，仅供学习交流。
关于vue项目，用手机来查看项目。
心有猛虎
10-16 1888
由于有时候谷歌手机调试与真实的手机环境还是有一定的差距。   第一步，开启你的vue项目  第二步，打开项目config/index.js文件，然后找到 module.exports 配置里面的 dev 配置，修改字段host:0.0.0.0，如下图：   第三步：cmd 打开管理器，然后输入ipconfig 查询本机ip    然后npm run dev 启动vue项目  ...
手机访问VUE项目
周家大小姐
05-16 4622
1.修改config 修改config文件夹下的index.js文件: module.exports = { dev: { hotst: 'localhost'//改为你当前config中的ipv4的地址 } } 1 2 3 4 5 2.查询本地ip ctrl+r输入cmd回车,打开命令提示符,输入ipconfig,查看本地ip,将项目url中的...
手机想调试pc端的vue项目（有端口号的项目均适用）
m0_55315930的博客
03-09 949
本地运行的pc端项目，想要适配手机端，想看查看一下项目在手机端的界面样式。可以采用这种办法。
vue移动端的真机测试
关注最新技术问题并持续维护更新
07-17 1844
Vue2.0     在 package.json 文件里加入 --host 0.0.0.0，需要重新运行 npm run dev { "name": "", "version": "1.0.0", "description": "A Vue.js project", "author": "", "private": true, "scripts": { ...
Vue 手机测试vue移动端项目
任她雨雪风晴
01-08 730
1：获取电脑网络ip地址（注意：手机端与电脑端需在同一无线局域网下，可电脑连接手机热点） 命令行输入：ipconfig 回车后获取到ip地址： 如图中的172.20.10.4 2：将获取到的地址替换项目中的http：localhost：8080地址 具体步骤：打开项目中的package.json文件，将红色部分代码段 "scripts": {     "dev": "webp...
uniapp如何在安卓上面真机看效果
04-03
### 如何在安卓设备上通过真机调试查看 UniApp 应用效果 要在安卓设备上实现 UniApp 的真机调试并查看应用效果，可以通过以下方式完成： #### 1. **确保环境准备** - 确认安卓设备已启用 USB 调试模式。这通常可以在设备的开发者选项中找到[^2]。 - 将安卓设备与电脑连接，并确认两者处于同一 Wi-Fi 网络下。 #### 2. **HBuilderX 设置** 在 HBuilderX 中进行如下操作： - 打开项目后，点击顶部菜单栏中的“运行”按钮。 - 选择“运行到手机或模拟器”，然后选择“USB 运行”或者“Wi-Fi 运行”。如果选择了 Wi-Fi 方式，请按照提示输入对应的 IP 地址和端口号。 #### 3. **解决可能遇到的问题** - 如果在真机调试过程中发现某些功能异常，比如 API 不可用等问题，需检查是否开启了 JS 编译成 ES5 的功能。此功能在微信开发者工具以及 UniApp 开发环境中都需要勾选，并建议重启相关软件以生效[^1]。 #### 4. **验证效果** 当上述步骤完成后，打开安卓设备上的浏览器访问指定地址（如果是 Wi-Fi 模式），或者直接观察设备屏幕展示的内容（如果是 USB 模式）。此时应能看到完整的 UniApp 页面渲染结果。 ```javascript // 示例代码片段：简单的 Vue 组件用于测试页面加载 <template> <view class="content"> <text>Hello, this is a test page!</text> </view> </template> <script> export default { data() { return {}; }, }; </script> <style scoped> .content { display: flex; justify-content: center; align-items: center; } </style> ``` ---
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值