vue-cli构建的项目,本地手机端预览 - 简单记录

最新推荐文章于 2022-06-21 11:00:14 发布
最新推荐文章于 2022-06-21 11:00:14 发布
阅读量214 收藏
点赞数
分类专栏： vue 自动化部署 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyhzyh1120/article/details/106209278
版权

vue-cli构建的项目，本地手机端预览

  1. 打开项目的package.json文件，修改里面的script里面的dev ;
    加入: --host ip,
    config中的index.js的host也要修改为ip
  2. 修改好了之后本地电脑访问要把之前网址的localhost换成自己的电脑ip地址;
  3. windows要关闭自己的电脑防火墙！ mac 可以省略这一步 ;
  4. 重新运行
zyhzyh1120
关注
专栏目录
两小时从零学会vue-admin-template框架
drhrht的博客
03-06 6741
一、vue-admin-template 1.项目简介 官网：https://github.com/PanJiaChen vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。 1.2下载项目 vue-element-admin 官网 vue-admi
VueCli PWA + Vuetify 项目创建指南
PHANTOM
05-28 615
随着Vuejs的快速发展和Vuejs相关生态系统的完善，构建一个VueCli工程应用已经相对容易。本文主要介绍了使用VueCli脚手架，结合vuetify UI框架创建和配置一个完整的PWA应用。
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-cli 构建的项目，本地手机端预览
泥猴桃的博客
12-21 494
前提： 手机和电脑在同一wifi下 一：打开项目的package.json文件，修改里面的script里面的dev 在dev 键值最后边加上 --host 192.168.199.196 192.168.199.196 就是自己的本地ip地址 windows 查看ip 地址 打开终端，或者git bash 输入 ipconfig 里边的ipv4 就是自己的本地ip mac 查看ip ，也是打...
Vue移动端项目如何使用手机预览调试
Lynn
04-12 2万+
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入ipconfig，...
Vue cli 打包完预览
pigpigbond的博客
04-12 1053
Vue cli 打包完预览 在我们项目完成的时候，我们需要预览下打包完成的项目 在Vue cli 官方文档中有解决方案 dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)， 所以 以 file:// 协议直接打开 dist/index.html 是不会工作的。 在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器， 例如 serve： 安装serve npm install -g serve 使用 # -s 参数的意
关于vue-cli项目build后本地和github pages预览问题
猫老板的豆
05-23 3111
前言 最近在初步完成自己的掘金移动端App后，想要上传到github，并且制作一个简单的预览功能，期间遇到了一些问题，分享在此，以便查阅。 打包Vue项目 当Vue项目完成后，在根目录下打开命令行，输入命令： npm run build 实际上此命令就是执行build.js文件，将项目打包成静态资源。 此命令完成后，项目根目录下会多出一个dist文件夹，dist文件里面有：...
vue-music-app:【Vue + Vuex + Vux】 网易云音乐web移动端
04-30
构建工具：Vue cli3; 框架：Vue + Vue router + Vuex; http 请求：axios; 歌词滚动：better-scroll; 部分 UI 组件：Vux; 运行此项目 使用 GitHub 镜像地址： 下载更快 git clone ...
vue实现在线预览pdf文件和下载（pdf.js）
01-21
最近做项目遇到在线预览和下载pdf文件，试了多种pdf插件，例如jquery.media.js（ie无法直接浏览） 最后选择了pdf.js插件（兼容ie10及以上、谷歌、安卓，苹果） 强烈推荐改插件，以下介绍用法 （1）下载插件 下载路径...
简约漂亮大气快速后台vue-admin-chart（Vue3+ElementPlus+Pinia+Echarts5），用远程API和Mock数据双接口，Composition API风格
weixin_44062054的博客
06-21 977
TodoAdmin-Vue是一个集成管理后台端模板解决方案，项目采用TS(TypeScript)脚本语言，基于Vue 3.2+/Vue-cli 5.0+/Vue-router 4.0+、Axios0.2.7、Element-plus 2.2+、Pinia 2.0+、ECharts 5.3.2以及Mockjs等搭建，项目是以Composition api风格编写，采用远程API接口和本地Mock双接口模式加载数据.........
手机访问电脑打开的vue项目
v_111的博客
04-14 4742
1，将手机连接到与电脑相同的WIFI2，更改vue项目config文件夹下的index.js的host地址。默认为“localhost”，更改为自己电脑的ip地址。3,npm run dev 运行项目，复制路径生成二维码。手机扫一扫即可。...
如何使用手机预览Vue项目（移动端）
热门推荐
手掌日月摘星辰
06-28 2万+
1、在命令行中输入npm run dev ，启动自己的vue项目，例：http://localhost:8081/#/goods，可以在浏览器预览2、那么如何在手机端预览vue项目呢？WIN+R，输入cmd启动命令行工具，输入ipconfig查看本机ip3、本机ip替换localhost，例：http://192.168.1.171:8081/#/goods，预览效果不变4、使用草料二维码，将ht...
如何在手机上查看测试vue-cli构建的项目
祈澈菇凉
08-14 586
用vue-cli构建的项目有时候有些功能需要在手机上测试，比如上传图片的时候调用手机拍照功能或者查看相册的功能，这个时候就要用到手机测试了，那么如何在手机上查看测试vue-cli构建的项目？今天就写一写具体步骤。 1：打开cmd,命令行运行 ipconfig，得到本机的ip地址： 图片.png 2：得到ipv4值， 用该值替换localhos...
Vue移动端项目手机实时预览
weixin_33843947的博客
03-21 1541
开发移动端的朋友们都懂得，模拟器测试6的飞起的时候，真机测试免不了来几个小bug。话不多说，我们来看看如何在手机实时预览vue项目~ （以下示例目录使用vue-cli脚手架生成） 1、第一步，打开我们的vue项目目录，找到config-->index.js文件 2、第二步，在dev模块下，将host配置改为"0.0.0.0" (默认为localhost) 3、第三步，把冰箱门带上.......
vue项目本地实现手机预览
qq_37902065的博客
05-19 4038
1.windows下打开命令ipconfig行查看本机ip地址2.修改config下的index.js文件3直接把地址发到手机即可访问
vue-cli3 本地预览打包代码
潇蓝诺依的博客
08-14 1351
本地预览打包代码 serve dist 目录需要启动一个 HTTP 服务器来访问 (除非你已经将 publicPath 配置为了一个相对的值)，所以以 file:// 协议直接打开 dist/index.html 是不会工作的。在本地预览生产环境构建最简单的方式就是使用一个 Node.js 静态文件服务器 npm install -g serve # -s 参数的意思是将其架设在 Single...
使用手机预览Vue项目（移动端）
我竟然是凡人
04-08 4545
1、在命令行中输入npm run dev ，启动自己的vue项目，例：http://localhost:8081/#/goods，可以在浏览器预览2、那么如何在手机端预览vue项目呢？WIN+R，输入cmd启动命令行工具，输入ipconfig查看本机ip3.将vue项目中的index.js 文件中的host：“自己IP地址”4.本机ip替换localhost，例：http://192.168.1....
让vue的项目可以在手机预览起来（不用内网穿透，只需要在局域网内）
magic_xiang的博客
11-25 5403
     现在对于做网页来说，一般都是移动端的项目比较多，所以一开始我学vue的时候也是从移动端项目开始做，但是我们的开发工具是浏览器，虽然可以在chrome开发模式中用模拟手机预览效果，那么怎么通过真机去预览效果呢？     一开始我想到的是放在我自己电脑Apache配置好虚拟主机环境中，然后通过内网穿透直接让手机访问，但是使用vue-cli搭建项目需要进行npm run build得到的文件...
vue移动端项目手机预览
weixin_43831302的博客
08-23 419
1.cmd 输入ipconfig 获取本机的ip地址 2.如果是vue-cli3搭建的项目 因为没有config文件夹，这边需在根目录新建一个 vue.config.js文件基本上所有的一些配制都在这里， 3.在这个文件里使用到 所有 webpack-dev-server 的选项都支持。注意： 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值