如何在手机上查看测试vue-cli构建的项目

简介: 如何在手机上查看测试vue-cli构建的项目

用vue-cli构建的项目有时候有些功能需要在手机上测试,比如上传图片的时候调用手机拍照功能或者查看相册的功能,这个时候就要用到手机测试了,那么如何在手机上查看测试vue-cli构建的项目?今天就写一写具体步骤。


1:打开cmd,命令行运行 ipconfig,得到本机的ip地址:

2:得到ipv4值, 用该值替换localhost

例如 localhost:8080 替换成 192.168.1.101:8080


3:找到config文件夹下的index.js文件,打开后,将host的值改为我本地的ip,保存后重启项目

此时的访问链接为:http://192.168.1.122:80804:通过在线网站http://cli.im/生成二维码(草料二维码),微信扫扫就可以直接访问了

或者直接访问步骤三的链接http://192.168.1.122:8080查看项目。如果是要访问具体页面,在#后面加上组件名称即可。

相关文章
|
4天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
25 5
|
4天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
41 3
|
23天前
|
JavaScript 应用服务中间件 nginx
vue项目中页面遇到404报错
vue项目中页面遇到404报错
|
23天前
|
JavaScript
Vue项目中强制刷新页面的方法
Vue项目中强制刷新页面的方法
16 0
|
4天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
24 6
|
4天前
|
JSON 数据可视化 前端开发
vue3+threejs+koa可视化项目——模型文件上传(第四步)
vue3+threejs+koa可视化项目——模型文件上传(第四步)
15 7
|
4天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
14 3
|
5天前
|
JavaScript API
【vue】分环境构建(开发/测试/生产)配置
【vue】分环境构建(开发/测试/生产)配置
11 1
|
7天前
|
资源调度 JavaScript Linux
VueCLI:Vue项目脚手架与构建工具技术详解
【4月更文挑战第24天】VueCLI是Vue.js官方的项目脚手架,简化创建与配置,提供丰富的插件系统,支持全生命周期功能,如代码编译、打包部署。它具有易于配置、跨平台支持等优势。通过安装、创建项目、运行及构建命令,开发者能快速搭建Vue应用。VueCLI允许自定义配置(vue.config.js)和安装各类插件,如vue-router、vuex,以适应不同项目需求,提高开发效率。
|
7天前
|
JavaScript
Vue 如何新建一个项目(如何安装依赖)
Vue 如何新建一个项目(如何安装依赖)
11 0