vue/cli3 使用手机访问本地项目

最新推荐文章于 2024-07-08 18:29:48 发布
最新推荐文章于 2024-07-08 18:29:48 发布
阅读量1.6k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19176681/article/details/104310123
版权
本文介绍了如何通过vue.config.js配置文件，设置Vue CLI3项目，使手机能够访问本地开发环境。首先，查看并使用本机IP地址替换devServer的host，然后指定端口号。设置完成后，重启项目即可用手机浏览。
摘要由CSDN通过智能技术生成

vue-cli 移除了 config 文件夹,多出一个 vue.config.js 的文件!
根据官方所描述:
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
官方链接:https://cli.vuejs.org/zh/config/

这里只写一下怎么使用手机访问vue的本地项目,多的我就不赘述了!

第一步
win+R 打开cmd
输入:ipconfig 查看一下本机网络ip,如下图:

在这里插入图片描述

可以看到本机的ip是:192.168.1.107

第二步:
打开 vue.config.js这个文件,添加devServer这个对象 部分配置参数如下:
在这里插入图片描述

module.exports = {
   
    lintOnSave: false,
    devSer
最低0.47元/天 解锁文章
qq_19176681
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue移动端项目手机预览
weixin_43831302的博客
08-23 409
1.cmd 输入ipconfig 获取本机的ip地址 2.如果是vue-cli3搭建的项目 因为没有config文件夹，这边需在根目录新建一个 vue.config.js文件基本上所有的一些配制都在这里， 3.在这个文件里使用到 所有 webpack-dev-server 的选项都支持。注意： 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到...
vue-cli3项目中怎么到手机上调试
01-20
虽说电脑上也能切换到手机模式调试，但我总感觉还差那么点什么，一直想到自己真正手机上调试项目，百度找了下，综合了好几遍文章，现在我明白了，现在分享给大家： 首先，vue-cli3工程文件夹中是没有vue.config.js这个文件的，所以我们需要自己创建一个； 然后再打开自己按一下windows加R键，输入cmd，打开自己电脑终端，输入ipconfig，就能看到自己电脑的ip地址了， 最后在vue.config.js文件中写入如下图所示代码即可： 在这里插入代码片 module.exports = { devServer: { host: '192.168.1.6',
vue 判断手机访问还是pc 访问
最新发布
qq_33240556的博客
07-08 1038
在 Vue 中，判断用户是通过手机还是 PC 访问网页，可以通过检查属性来实现。这个属性提供了关于浏览器的信息，我们可以从中分析出用户代理字符串，从而判断设备类型。以下是一个简单的示例，说明如何在 Vue 中实现这一逻辑：你可以在项目的入口文件（如main.js）中添加一个全局的方法，或者在某个组件内直接使用这个逻辑。
超简单手机连接 vue 项目 localhost
cimo的博客
03-08 443
1 启动你的 vue 项目 2 手机和电脑在同一局域网 3 输入 vue 项目启动时的网址
【Vue3】手机访问vue项目 || 手机无法访问vue项目 || 手机无法访问vue项目解决方法
此人太懒，没有任何简介
03-03 3285
【Vue3】手机访问vue项目 || 手机无法访问vue项目 || 手机无法访问vue项目解决方法
VUE ---- 移动端显示pdf类型文件
heavenz19的博客
11-24 569
VUE ---- 移动端显示pdf类型文件 1.方法一：但是会有手机端显示不出来的情况，pc端正常显示 <iframe :src="$route.query.url" class="iframe"></iframe> 2.方法二：(可用) 参考地址：https://www.cnblogs.com/qdlhj/p/11237040.html a.安装npm模块 vue-pdf npm install --save vue-pdf b.全部代码展示 <template>
详解@Vue/Cli 3 Invalid Host header 错误解决办法
12-09
在开发Vue.js应用程序时，你可能会遇到一个名为`Invalid Host header`的错误，尤其是在使用@Vue/Cli 3工具链时。这个错误通常出现在你尝试在非标准的或自定义的HTTP主机头环境下运行Vue CLI的开发服务器时。在本文中...
vue/cli@3.x项目pwa处理
var_deng的博客
09-30 1584
前言 什么是pwa？ Progressive Web Apps，渐进式 Web 应用 pwa是我们在追求webapp便捷和原生应用良好体验结合的过程中的产物，目前兼容性是最大障碍 底层使用的是workBox (service worker的一个框架)，封装了各种api和缓存策略， vue-cli3.0集成的是workbox-webpack-plagin，我们可以通过vue.config.js的pwa配置项进行配置 pwa 特征？ 具有可离线、添加到桌面（一级入口）、后台同步、服务端推送等特征 使
Vue-cli配置打包文件本地使用的教程图解
10-18
从给定的文件内容中，我们可以抽取出关于Vue-cli配置打包文件本地使用的具体步骤和相关知识点。 知识点1：Vue-cli的基本介绍 Vue-cli是一个基于Vue.js进行快速开发的完整系统，它提供了一个官方的脚手架工具来帮助...
使用@vue/cli 5.0.8的Vue2多页面项目搭建与打包基本操作
billowson的博客
10-23 5855
使用@vue/cli 5.0.8的Vue2多页面项目搭建与打包基本操作
vue H5页面唤起手机app（iOS和Android），没有安装则跳转下载页面
热门推荐
web小袋鼠
09-17 1万+
test
vue调用手机浏览器打开pdf_这个不到1M的手机浏览器，打开1个网站后，用起来更顺手了！...
weixin_39809540的博客
12-03 677
你有没有遇到过这种情况？本来是打开手机浏览器搜索些什么，结果不小心被首页推送的资讯吸引，看了半小时新闻后，一点也想不起来自己为什么要点开这个App了！如果不想在这些资讯上浪费时间，那就趁早换一款浏览器吧！那么，哪个浏览器简洁好用，不推送资讯，体积还小呢？酷安大佬@various 开发过一款轻量级手机浏览器——Via浏览器。这款App极致简约干净，大小只有514KB，启动速度还非常快，因为...
如何在手机上访问vue项目
Lskytory的博客
08-21 5207
如何在手机上访问vue项目： (借鉴) 1.找到无线网络局域网IP 按住window+R键，输入cmd，回车，在弹出的框内，输入ipconfig，回车 在展示的结果中，有一个以太网的ip，有一个无线网的ip，复制无线网络的ipv4地址，如192.168.1.3 2.为项目设置运行IP 打开vue项目的config文件夹中的index.js文件，在dev对象中，host的值由’local...
手机访问VUE项目
周家大小姐
05-16 4597
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中的...
手机端访问本地vue项目
a12hhhe的博客
08-27 4885
1.电脑和手机共用同一网络 2.查看电脑IP 命令行输入 ipconfig ，找到IPv4 地址就是你的本机IP地址；注意不是在浏览器直接输入IP显示的那个外网IP地址 3.在Vue项目下找到config目录下的index.js文件 把index.js中的host值 localhost 修改为你的 IP 地址 4.注意把项目中的地址，如下：localhost都改为以上IP地址 ...
在手机上运行电脑本地的VUE项目
supercolorpower的博客
05-05 3367
1、保证电脑和手机在同一个局域网内。 手机连接电脑WIFI 可以选择用电脑本身的WiFi 或者选择360WiFi。 我用的是360WIFI 2、查看电脑IP 打开cmd，输入ipconfig 找到ip，192.168.xx.xx 3、打开你的项目文件 找到config目录下的index.js 把localhost改成你此时的ip 4、重启/运行项目 在pc浏览...
vue/cli4 无法通过ip访问本地项目
09-03
vue/cli4 默认的启动命令是通过 localhost 来访问本地项目的，因此无法直接通过 ip 地址来访问项目。但是我们可以通过修改配置文件来实现通过 ip 访问本地项目的功能。 首先，打开项目根目录下的 vue.config.js 文件，如果没有则新建一个。在该文件中添加以下代码： module.exports = { devServer: { open: true, host: '0.0.0.0', port: 8080, https: false, hotOnly: false, disableHostCheck: true, } } 上述代码中的 devServer 部分是用来配置开发服务器的选项。其中 host 字段设为 '0.0.0.0'，表示允许其他设备通过电脑的 ip 地址来访问项目。端口号 port 可以根据需要进行修改。 保存文件后，在命令行中执行 npm run serve 来重新启动项目。 接着，打开浏览器，输入电脑的 ip 地址加上之前设定的端口号（例如 http://192.168.1.100:8080），回车即可通过 ip 访问本地项目。 需要注意的是，只有连接到同一局域网下的设备才能通过 ip 访问到本地项目。若无法正常访问，请确保设备与电脑处于同一网络环境下。另外，关闭防火墙或在防火墙中添加对应的端口规则也可能是导致无法通过 ip 访问的原因之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值