手机访问Vue项目

最新推荐文章于 2024-04-26 16:49:42 发布
最新推荐文章于 2024-04-26 16:49:42 发布
阅读量1.6k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/d295968572/article/details/80580673
本文介绍了如何在手机上预览Vue项目，包括修改config.index.js文件，查询并使用本地IP，以及通过草料二维码生成预览地址。

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

1.修改config

修改config文件夹下的index.js文件:

module.exports = {
    dev: {
        host:
最低0.47元/天 解锁文章

200万优质内容无限畅学
完美解决通过IP地址访问VUE项目的问题
10-15
本文将详细介绍如何完美解决通过IP地址访问Vue项目的问题。 首先，我们需要对Vue项目的配置文件进行更改。在Vue项目中，配置文件通常是`config/index.js`。在这里，我们将`host`设置为`0.0.0.0`，这使得服务器监听...
vue项目在安卓低版本机显示空白的原因分析(两种)
10-18
在分析Vue项目在安卓低版本设备上显示空白的问题时，我们可以从两个方面进行探讨。第一，ES6语法在某些老旧安卓版本上可能不被支持，导致项目无法正常运行；第二，打包时可能存在的错误，这些错误在浏览器环境中可能...
手机端访问本地vue项目
liuzaixi的博客
04-26 1597
devServer添加配置： host: “0.0.0.0”, disableHostCheck: true。注意不是在浏览器直接输入IP显示的那个外网IP地址。
前端开发：通过手机端访问本地vue开发项目
yman_pro的博客
07-08 6547
故事背景 卤煮用的是vue框架，当我们想用手机获取电脑访问一下正在开发的项目，岂不是狂拽酷炫~ 实现教程 1、保证你的项目跑起来了，并且要预览的设备和你开发的设备连接同一个网络（不在同一个网络，那基本废了，另寻他法吧） 2、查看开发设备的IP(小黑框敲指令：windows–ipconfig、mac–ifconfig ) 3、找到package.json文件，给运行项目的指令后面添加一个 --host 指令，写入查到的IP（根据个人项目来，一般vue 2.0是dev，卤煮的是3.0：serve，当然你可以自定
如何在手机上访问vue项目
Lskytory的博客
08-21 5318
如何在手机上访问vue项目： (借鉴) 1.找到无线网络局域网IP 按住window+R键，输入cmd，回车，在弹出的框内，输入ipconfig，回车 在展示的结果中，有一个以太网的ip，有一个无线网的ip，复制无线网络的ipv4地址，如192.168.1.3 2.为项目设置运行IP 打开vue项目的config文件夹中的index.js文件，在dev对象中，host的值由’local...
vue项目怎么在手机查看
豪先生的博客
09-24 4263
可能，我们连接同一个网络以后，在手机浏览器输入第二个网址，发现手机端还是不能访问服务。这时候我们把电脑的防火墙关闭一下就好了。一个是本地的，一个是网络的。在手机浏览器地址栏输入第二个网址（这个时候再重新用手机查看vue项目第二个网址，就可以查看项目。【注意】：我们的手机和开启服务的电脑要连入同一个网络。然后点击 公用网络，然后 关闭防火墙。启动一个项目之后，会出现两个网址，），我们可以在手机端查看我们的。选择-windows防火墙。点击电脑左下角的【设置】
使用手机查看vue项目
蓝枫秋千的踩坑记录
01-03 591
将项目进行打包 npm run build 打包后找到项目根目录下config目录下的index.js文件 将原来localhost替换成0.0.0.0 查看本机ip windows使用cmd进入控制台,输入ipconfig即可查看 mac打开终端输入nslookup localhost即可查看 将浏览器地址栏的url的0.0.0.0替换成你的本机ip 然后复制这个url使用草料二维码生成二维...
vue项目配置同一局域网可使用ip访问的操作
01-18
补充知识：@vue/cli创建项目报错ERROR Failed to get response from /vue-cli-version-marker的解决方案 今天他们遇到一个很有意思的bug，用@vue/cli创建项目的时候报错了，还是个从来没见过的报错： 一开始以为是...
Vue移动端项目实现使用手机预览调试操作
11-20
最近在开发移动端Vue移动端项目，查了一些资料，这里分享下如何在webpack工具构建下的vue项目，在手机端调试和预览，言归正传。 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi...
vue本地项目手机访问
u010624421的专栏
02-19 545
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
手机浏览器查看vue项目
Serena_tz的博客
09-16 2771
在手机浏览器上面我们可以直接查看vue项目。在有网的条件下，我们使用指令npm run serve启动一个项目，会出现两个网址，一个是本地的，一个是网络的。在手机浏览器地址栏输入第二个网址（Network），我们可以在手机端查看我们的vue项目。 【注意】：我们的手机和开启服务的电脑要连入同一个网络。 ...
手机查看本地的vue项目方法
dreamy_wx的博客
05-21 291
host里填入自己的IP地址 把项目跑起来手机打开链接即可 这里PC和手机要处在同一个网络下，如果给他人查看建议使用内网穿透 内网穿透博文链接：链接: https://editor.youkuaiyun.com/md/?articleId=117114051.
VUE手机访问项目
brain_bo的博客
11-01 1637
1、在config/index.js找到host: 'localhost'， 2、将localhost替换成ip地址，如host: '192.168.3.137'， 3、在地址栏输入http:192.168.3.137:8081即可访问（8081是端口号，可自行更改）   就这么简单，小伙伴顺手点个赞呗~...
手机访问VUE项目
周家大小姐
05-16 4628
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本地项目设置通过手机访问
weixin_30745641的博客
08-28 1027
最近再用vue写一个移动端的应用，想通过手机访问看看页面效果，于是有了下文。 1.shif+右键打开命令行工具，输入ipconfig,回车，得到电脑的ip 2.找到工作目录下的config文件夹中的index.js,将localhost换为ipv4地址， 3，重新编译项目，命令行运行npm run dev命令开启服务 4.电脑或手机端浏览器地址栏输入ipv+端口号如:192.168....
vue项目运行后使用ip地址在手机上打开
weixin_44784401的博客
06-29 1525
vue项目运行后使用ip地址在手机上打开
vue项目之手机联调
weixin_39720394的博客
05-30 1283
如何使手机能访问写的vue项目？以window为例1、打开终点，输入 ipconfig,获取本机ip地址2、打开vue项目的package.json,找到"dev": "webpack-dev-server  --inline --progress --config build/webpack.dev.conf.js"这一配置项，然后在其中添加 --host 0.0.0.0 即可。如下："dev"...
vue项目本地实现手机预览
qq_37902065的博客
05-19 4073
1.windows下打开命令ipconfig行查看本机ip地址2.修改config下的index.js文件3直接把地址发到手机即可访问
如何在手机上预览vue项目
一起coding，一起嗨。
11-19 1781
前提：手机和电脑处于同一网络(同一个路由器),电脑WiFi和手机WiF、电脑有线和手机wifi 一、打开cmd查询电脑IP ipconfig 二、将电脑IP配置到vue的package.json中 dev: { host: '192.168.50.45', // 原为: hotst: 'localhost' } --host192.168.50.45 "scripts": { "dev": "webpack-dev-server --inline ...
手机浏览器访问vue3项目
最新发布
06-15
### 如何在手机浏览器中正常访问和适配 Vue3 项目 为了确保 Vue3 项目能够在手机浏览器中正常访问并实现良好的适配效果，需要从以下几个方面入手：开发环境配置、移动端适配插件集成以及实际部署访问。 #### 1. 开发环境配置 当开发 Vue3 项目时，默认的开发服务器仅监听本地回环地址（`localhost`），这会限制其他设备（如手机）无法直接访问。为了解决这一问题，需要修改 `vue.config.js` 文件中的 `devServer` 配置[^2]： ```javascript module.exports = { devServer: { host: "0.0.0.0", // 允许外部设备访问 disableHostCheck: true, // 禁用主机检查 port: 8080 // 指定端口号 } }; ``` 完成上述配置后，启动开发服务器，并通过手机访问开发机器的局域网 IP 地址。例如，如果开发机器的 IPv4 地址为 `192.168.1.100`，则可以通过手机浏览器访问 `http://192.168.1.100:8080`[^2]。 #### 2. 移动端适配解决方案 Vue3 项目在手机浏览器中访问时，可能会因为屏幕尺寸差异导致布局错乱。为了解决这一问题，可以引入移动端适配插件[^3]。以下是一个常见的适配方案： - **使用 viewport 元标签**：在 HTML 文件中添加以下代码以确保页面能够根据设备宽度进行缩放： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` - **集成移动端适配插件**：推荐使用 `postcss-px-to-viewport` 插件来实现像素到视口单位的转换。安装并配置该插件如下： ```bash npm install postcss-px-to-viewport --save-dev ``` 在项目的 `postcss.config.js` 文件中添加以下配置： ```javascript module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 375, // 设计稿宽度 viewportHeight: 667, // 设计稿高度 unitPrecision: 5, // 转换后的精度 viewportUnit: 'vw', // 视口单位 selectorBlackList: ['.ignore', '.hairlines'], // 忽略的选择器 minPixelValue: 1, // 最小像素值 mediaQuery: false // 是否在媒体查询中转换 } } }; ``` - **动态调整根字体大小**：通过 JavaScript 动态计算并设置 `html` 根元素的字体大小，从而实现基于屏幕宽度的响应式设计： ```javascript const setRemUnit = () => { const html = document.documentElement; const width = html.clientWidth > 640 ? 640 : html.clientWidth; // 限制最大宽度 html.style.fontSize = `${width / 10}px`; // 基于设计稿宽度（如375px）计算 }; setRemUnit(); window.addEventListener('resize', setRemUnit); ``` #### 3. 实际部署与访问 在开发阶段完成后，将 Vue3 项目打包并部署到服务器上。通过域名或公网 IP 地址，手机可以直接访问部署好的 Vue3 项目。确保服务器支持 HTTPS 协议以提升安全性[^1]。 --- ### 示例代码 以下是完整的移动端适配示例代码： ```javascript // main.js 中初始化适配逻辑 import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); // 动态调整根字体大小 const setRemUnit = () => { const html = document.documentElement; const width = html.clientWidth > 640 ? 640 : html.clientWidth; html.style.fontSize = `${width / 10}px`; }; setRemUnit(); window.addEventListener('resize', setRemUnit); app.mount('#app'); ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值