关于用webpack并且实现在手机上面测试项目

最新推荐文章于 2022-08-10 23:41:28 发布

ggzw123

最新推荐文章于 2022-08-10 23:41:28 发布

阅读量3.8k

点赞数 1

分类专栏：配置文章标签： webpack 手机端手机电脑同时看项目 web前段

本文链接：https://blog.csdn.net/ggzw123/article/details/54956124

版权

配置专栏收录该内容

0 篇文章 0 订阅

订阅专栏

假设你已经在使用webpack搭建模块化开发项目，跳过webpack的安装配置，接下来从如何实现手机端测试网页说起。

第一步用打开cmd windows用户输入ipconfig查看，mac执行ifconfig查看里面的Ipv4地址

第二步在webpack项目里面的package.json这个文件里面的‘script’下的‘dev’ 后面加上 --host 0,0,0,0 (ps: 这里4个0代表你的ip地址)

第三步 npm run dev 启动你的项目
第四步用草料二维码网址：http://cli.im/ 把你的项目网址生成二维码
第五步用手机扫这个二维码进入你的网站注意要确保在同一wifi 下面

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ggzw123

关注关注

1
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

webpack构建的项目配置ip运行地址

你猜我猜不猜

04-01

7399

我们平常在做vue或者react项目时，往往会使用脚手架直接搭建，有些脚手架会封装好使用本地的ip进行项目的访问，但是有些时候我们使用npm run dev或者npm start运行项目，发现只有localhost:8080类似的访问地址，这个时候如果我们有额外的需求，不如用手机来访问看看效果，会发现localhost这个地址是生成不了二维码的，这个时候我们就需要自己动手去配置。目前我所了解的方式...

node连接数据库；webpack；token令牌的实现；CommonJs规范；websocket

tian_98的博客

12-01

393

day 01 node连接数据库 //1、引入 const mysql =require("mysql"); //2、创建连接对象 //使用createConnection()方法来创建数据库参数 //数据库参数的形式： //1、对象的形式（推荐使用） const conn = mysql.createConnection({ host:"10.10.32.162",//数据库地址，如果是本地使用localhost port:3306,//数据库的端口号，默认3306 user:"w

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

vue项目使用webpack构建的本地服务环境，在手机上访问调试

weixin_33953249的博客

04-29

434

使用vue脚手架构建的项目，一般在本地localhost运行，配合浏览器的模拟调试工具开发。如果想看真机环境，又不想build到线上。 webpack能配置电脑本地内网环境指向公网访问的！ 1、打开项目的package.json文件，修改里面的script里面的dev "scripts": { "dev": "webpack-dev-server --inline --...

手机上调试 webpack如何设置与操作

牧师的博客

02-22

1174

1.先要电脑和手机同在一个局域网（如同连一个wifi） 2.后在电脑上打开cmd 输入 ipconfig 指令按确定，会出现如下情况： 3.找到你的“无线局域网适配器…” 中的IPv4 的地址的（我的是:192.168.0.121） 4.后在package.json 文件中的 ‘dev’ 中添加 –host 你的IPv4地址我的如下（前面是我的webpack配置）： 5.后在电脑上重新打开...

使用手机访问vue项目

dt1991524的博客

12-24

994

在做vue项目测试时，需要放在手机上调试，那么如何放在手机上调试呢？毋庸置疑，直接使用ip地址+端口号用手机去访问电脑上的vue项目。 1. 把host中的改为“自己电脑的IP地址” 2.改为‘127.0.0.1’ 3.改为‘localhost’ 用上述3中方式就可以放在手机上测试啦！...

vue----webpack----手机测试配置

weixin_33989058的博客

03-03

153

1.打开命令窗口 win + r 输入 config　　按回车，查看IPv4地址 2.vue-cli webpack模板找到config文件夹下的index.js文件，打开后，将host的值改为我本地的ip，保存后重启项目即：host:localhost 更改为 host：192.168.43.201此时的访问链接为：http://192.168.43.201 ...

vue-cli4+webpack4+vant搭建前端移动H5通用框架

破鞋何苦阑珊的博客

07-01

5778

vue-cli4+webpack4+vant搭建前端移动H5通用框架(开箱即用) 简介该框架是基于cli4 + webpack4 + vant + less的移动端H5通用框架，可供快速开发。在此之前需要了解一下一个移动端H5改包含哪些技术点：序号要点 1 cli-4 2 UI框架 vant 3 rem自适应 4 请求拦截封装 5 路由配置 6 登录校验 7 环境变量配置 8 webpack配置(vue.config.js) 9 弹窗封装(由于不同项目

云E办Springboot+vue——前端项目完整版（含源码）

08-10

5万+

本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项

基于SSH框架的电影订票系统网站的设计与实现

huaying0的博客

03-07

4152

源码及论文：源码及论文下载：http://www.byamd.xyz/tag/java/ 开发计划 1. 甘特图 2. 开发计划简述如图所示在项目初期阶段，首先开始需求调研。需求调研阶段，我们将首先根据初期的会议内容考虑市场需求以及基本的市场现状，并根据以上的内容设计问卷来寻找痛点。我们准备使用第三方问卷工具，以电子问卷的方式来进行调查。初步预计会收到200份问卷。在需求调查阶段，同时开展对同类型的网站的评估工作。进入初步的需求分析阶段。目标是取得现有电影购票网站的基本购票流程，并对其交互等

Vue学习四：webpack打包（指定环境接口访问Ip）

Cx的博客

04-21

1591

webpack打包指定环境ip，区分生产环境、测试环境和开发环境的配置

Nuxt-Vue-App-:Nuxt，Vue App测试任务

03-30

nuxt-vue-test-task 构建设置 # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run build $ npm run start # generate static project $ npm run generate 有关工作原理的详细说明，请查看。

webpack搭建的项目如何在手机端通过电脑本地ip可以访问呢

xiasohuai的博客

11-25

1814

我们在做手机端项目的时候，肯定想能让项目在真机上快速方便的访问，而不是等着服务端发版才能访问到，那么如何实现呢？那么我们只需要在package.json的dev进行配置--host 0.0.0.0，然后要看你webpack-dev-server起服务的host的ip，比如webpack-dev-server的ip是192.168.1.1，那手机端就访问192.168.1.1:8080即可。 ...

webpack无法通过 IP 地址访问 localhost 解决方案

thenewdiana的博客

03-10

1万+

1.问题描述：今天用 webpack (v1.14.0)配置本地服务，为了能在移动端预览开发效果，需要通过 IP 地址生存二维码然后手机扫描访问。却发现不能通过 ip 访问 localhost。 2.解决方案：经多方查询，在 npm run dev 时添加参数 --host 0.0.0.0即可。参考地址：https://github.com/web

使用webpack构建本地服务器,实现自动刷新，并直接在手机上访问

现在学习也不晚

10-11

3906

前提使用webpack构建前端开发环境，可以直接使用webpack构建本地服务，实现页面保存自动刷新。模块安装首先安装webpack-dev-server模块 npm install --save-dev webpack-dev-server 安装完成后然后修改webpack.config.js文件，在里面添加 module.exports = { devto

ERROR in multi ./hello.js bundle.js Module not found: Error: Can't resolve 'bundle.js' in 'F:\demo\t

LPLIFE的博客

06-11

2万+

解决这个问题请跳到第六步下面是比较完整的简单打包：一.确保已经安装了nodeJS之后. 二. 创建webpack-demo,我的是f盘下的, 2.然后进入这个文件夹: 3.进行初始化,一路都是选择默认(回车就可以): 查看初始化后的文件夹,里面只有一个json文件: 4. 接下来装webpack npm install webpack --save-dev ...

求救，vue 线上项目控制台打开，有webpack:// 显示源码

weixin_34192732的博客

12-20

2396

请问一下，这要怎么弄，不想暴露源码怎么禁止webpack:// 下显示源码转载于:https://juejin.im/post/5a39e965f265da431b6d57ba

mac下安装webpack

appxu的博客

09-04

4673

近半年工作的时候开始使用webpack构建项目，公司和以前的电脑都说windows系统，最近买了的苹果机，本以为在自己电脑上安装会很简单，但是出了点意料之外的问题，所以分享一下，希望可以帮助遇到同样问题的同学。我使用的是npm的方式安装，首先你的安装node js ，node地址是：https://nodejs.org/en/download/ nodejs的安装我就不说了，相信大家都已经会了，和

Webpack构建Vue项目实战指南

"用Webpack构建Vue项目的实践" Webpack 是一款强大的模块打包工具，常用于构建现代 JavaScript 应用，尤其是与 Vue.js 结合时，可以提供高效的开发环境和优化流程。本文主要介绍如何使用 Webpack 来构建一个 Vue ...