如何把本地的nuxtjs项目在手机上运行

最新推荐文章于 2024-07-03 15:58:07 发布

钰@

最新推荐文章于 2024-07-03 15:58:07 发布

阅读量291

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_52687650/article/details/131470993

版权

通过win+R键打开命令提示符，运行cmd，然后执行ipconfig获取本地IPv4地址。在Nuxt.js的package.json文件中，修改`config.nuxt.host`为该IPv4地址，并设置`config.nuxt.port`为80。使用`npmrundev`启动项目后，在同一WLAN环境下，可在手机浏览器上访问预览。

摘要由CSDN通过智能技术生成

首先，win+R键输入cmd命令，打开命令提示框
然后，输入ipconfig，找到IPv4 地址
接着，在nuxt里的package.json中修改

  "config": {
    "nuxt": {
      "host":"本地的 IPv4 地址",
      "port": "80"
    }
  }

npm run dev 打开nuxt项目
最后，复制链接到手机浏览器上就可以看了

注意在同一个WLAN下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

钰@

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

微信开发 - 详细实现第三方网站或H5网页使用微信支付、微信授权登录时，本地开发环境提示redirect_uri参数错误无法调试，让本地项目运行IP地址就能测试支付或登录，无需每次部署到服务器上调试！

王佳斌

08-13

6316

vue2，nuxt2，vue3，nuxt3，uniapp，微信开放平台，公众号，微信支付，微信登录授权，redirect_uri参数错误，本地调试，报错，如何在本地就能测试，vue跑出来的ip地址，微信支付回调错误，微信登录回调错误，公众号网页本地调试，内网穿透，调用微信支付提示，内网穿透本地调试，如何在测试环境进行支付测试，必须要传到线上才行吗，在测试环境里无法测试怎么办，手机h5移动端，pc网页，公众号页面，映射，host，本地回调地址，微信开放平台的回调域名怎么设置为本地域名IP，在本地调试不了怎么办

Vue3 - 详细实现网页 “开启录音并生成音频文件，上传到服务器效果“，浏览器录制外部音频调用麦克风并传到后端，兼容全部浏览器、支持 PC 网页或手机 H5 网页、可本地播放试听（详细示例运行代码）

王佳斌

05-21

5245

vue3，nuxt3，uniapp，网页网站，麦克风，网页录音，MediaRecorder，浏览器录音，移动端h5网页，手机端录音，web网页录音，vue3网页录音并上传到服务器，web如何实现录制音频，vue网页录音，音频录制播放和上传服务器，vue3实现H5网页录音并上传，无法调用麦克风弹框怎么办，recorder-core官方文档，Recorder，非https怎么本地录音，录音报错失败，录音后怎么播放音频，如何获取录音mp3文件，解决一直不提示麦克风权限，小白详细教程，实时录音，调用浏览器麦克风录音

参与评论您还未登录，请先登录后发表或查看评论

移动端如何调试本地运行的前端项目

最新发布

weixin_49015558的博客

07-03

471

移动端如何调试本地运行的前端项目

基于Nuxt实现移动端的企业官网

08-13

项目中整合 vue nuxt axios vuex vue-router (nuxt 自带 vuex 和 vue-router)，一个基于 Nuxt 的服务器端渲染 Demo

普歌-飞灵团队-如何把nuxt运行到手机上

fsmj_的博客

08-26

1031

nuxt运行到手机首先，win+R键输入cmd命令，打开命令提示框然后，输入ipconfig，找到IPv4 地址接着，在nuxt里的package.json中修改 "config": { "nuxt": { "host": "", // 把IPv4 地址复制到host里 "port": "1005" } }, npm run dev 打开nuxt项目最后，复制链接到手机浏览器上就可以看了注意在同一个WLAN下

手机怎么访问电脑的本地的移动端项目？超级简单，这篇文章直接搞定

xiaoxiaoxin1128的博客

08-18

1818

出现该问题主要是因为你电脑的防火墙将某些端口号的 htpp 的网络访问协议给屏蔽掉了（一般的电脑操作系统是默认不屏蔽 80,8080 一些常用的端口的），所以你可以直接将自己的电脑的防火墙全部关闭。作为一名开发或者运维的同学，平时都在电脑上F12开启手机适配模式，去调整代码和样式，有时候出于更严谨的方式，我们需要使用真机来调试样式，由于代码在本地的环境，没有上传到服务器，所以我们需要，手机怎么去开启访问本地的移动端项目呢？#手机怎么访问电脑的本地的移动端项目。#第二步：查看的电脑的IP。

前端开发：通过手机端访问本地vue开发项目

yman_pro的博客

07-08

6059

故事背景卤煮用的是vue框架，当我们想用手机获取电脑访问一下正在开发的项目，岂不是狂拽酷炫~ 实现教程 1、保证你的项目跑起来了，并且要预览的设备和你开发的设备连接同一个网络（不在同一个网络，那基本废了，另寻他法吧） 2、查看开发设备的IP(小黑框敲指令：windows–ipconfig、mac–ifconfig ) 3、找到package.json文件，给运行项目的指令后面添加一个 --host 指令，写入查到的IP（根据个人项目来，一般vue 2.0是dev，卤煮的是3.0：serve，当然你可以自定

手机浏览器访问本地运行前端项目,手机端项目调试,移动端项目调试,其他电脑访问本电脑运行前端项目

chj12138的博客

05-23

476

手机浏览器访问本地运行前端项目,手机端项目调试,移动端项目调试,其他电脑访问本电脑运行前端项目

Nuxt项目的部署

青崖梦

08-13

2862

项目介绍项目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router)，一个基于 Nuxt 的服务器端渲染 Demo PC端GitHub地址移动端GitHub地址一、PC端项目部署关于项目部署折腾了我好多时间，网上许多百度来的文档不适合我的项目，所以自己摸索着终于部署起来了，开心O(∩_∩)...

Vue2 - 详细实现网页 “开启录音并生成音频文件，上传到服务器效果“，浏览器录制外部音频调用麦克风并传到后端，兼容全部浏览器、支持 PC 网页或手机 H5 网页、可本地播放试听（详细示例运行代码）

王佳斌

05-21

4610

vue，nuxt，uniapp，网页网站，麦克风，网页录音，MediaRecorder，浏览器录音，移动端h5网页，手机端录音，web网页录音，recorder-core官方文档，Recorder，非https怎么本地录音，录音报错失败，录音后怎么播放音频，如何获取录音mp3文件，解决一直不提示麦克风权限，小白详细教程，实时录音，调用浏览器麦克风录音，浏览器不兼容，wav，mp3，vue怎么实现网页录音呢，vue2网页录音并上传到服务器，web如何实现录制音频，vue网页录音，音频录制播放和上传服务器，vu

Nuxt 配置踩坑记录(2)

菜鸟史

07-10

1059

1、px2rem 到 px2vw 今天来测试了昨天新配的 postcss-px2rem-exclude, 发现项目运行时有个令人头大的问题，大概率是因为flexable.js在服务端渲染的原因，尽管文件时配置在 head 里面的，但是fontSize的计算速度使页面载入时会因为计算而有个放大缩小的过程，在手机上尤其明显，在经理了几个小时的挣扎后（期间也试了在一开始隐藏body，在计算出fontsize时显示body，但是这里根本获取不到body的visibility ，也修改不了，定时器也不行），决.

vue:手机访问本地项目

qq_45061461的博客

06-28

961

3.手机浏览器输入地址 : 电脑ip + 项目端口号(比如:8080)1.需要在项目根目录config文件夹中的index.js中配置。2.需要电脑的ip地址需要在同一个局域网环境中。查看电脑 :IPv4 就是ip。

手机访问本地vue项目

learn_daydayUp的博客

09-30

1151

手机访问本地vue项目 1.vue配置修改： 1》config ->index.js修改host 2》pa’ckage.json的dev加上–host 0.0.0.0 2.重启项目此时用手机打开运行成功的链接。注意：手机和电脑必须在同一局域网内（连接同一个无线网）。如果此时还打不开，就把防火墙全部关闭个人纪录，方便回忆 ...

JQuery和JS操作LocalStorage/SessionStorage的方法

热门推荐

一碗单炒饭的专栏

02-26

5万+

首先说一下LocalStorage和SessionStorageLocalStorage 是对Cookie的优化没有时间限制的数据存储在隐私模式下不可读取大小限制在500万字符左右，各个浏览器不一致在所有同源窗口中都是共享的本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存）不能被爬虫爬取，不要用它完全取代URL传参 IE７及以下不支持外，其他标准浏览器都完全支持

nuxt3适配移动端

xxx

05-22

1772

【代码】nuxt3适配移动端。

手机访问本地静态页面或项目多种解决方法

Jovan的博客

05-09

1482

在项目开发中一般编写移动端的项目需要手机进行调试和适配。那么怎么怎么访问本地开发的静态html。其实都是为了启一个服务。方法一： 1安装服务器环境：如wamp、appserv等集成环境 2将项目搬到www文件夹里面（一定不要用中文命名） 3选择第二个行的ip地址注意：手机wifi一定要在同网段的连接，否则访问出错方法二： 1.安装nodejs环境，官网地址最新版本下载地址即可 2.在所在的项目下输入命令：npm/cnpm install anywhere -g； 3.node..

nuxt3 一套适配移动端web端 nuxt3一套代码写官网

weixin_49230250的博客

07-04

5524

nuxt3 一套代码适配 web端移动端

Nuxtjs启动服务直接打开浏览器以及设置使用ip地址访问nuxt项目

weixin_43630802的博客

06-09

2266

启动服务直接打开浏览器以及设置使用ip地址访问nuxt项目 // package.json "scripts": { "dev": "nuxt --open", // 启动后直接在浏览器中打开 }, "config": { "nuxt": { "host": "0.0.0.0", // 使用ip地址访问. "port": 3000 } }, ...

Nuxt3实现哔哩哔哩移动端实战

黑马程序员官方博客

08-23

570

Nuxt 框架提供了一种基于 Node.js 的，可以让 Vue 应用在服务器端进行渲染，从而提高页面的加载速度和 SEO。

Nuxt.js项目创建全流程图解：从安装到配置详解

- **步骤十一：安装成功** - 完成所有步骤后，检查是否安装和配置正确，通过运行项目确认一切正常。总结来说，创建Nuxt.js项目是一个系统化的过程，涉及技术选型、配置管理和最佳实践。理解这些步骤并按部就班地...