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

最新推荐文章于 2022-05-17 15:05:20 发布
最新推荐文章于 2022-05-17 15:05:20 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： webpack/npm vuejs h5移动端/微信公众号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiasohuai/article/details/84499116
版权

我们在做手机端项目的时候，肯定想能让项目在真机上快速方便的访问，而不是等着服务端发版才能访问到，那么如何实现呢？

那么我们只需要在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即可。

或者修改config文件夹下的index.js

姜无忧
关注
专栏目录
webpack vue项目开发环境局域网访问方法
08-27
下面小编就为大家分享一篇webpack vue项目开发环境局域网访问方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧
webpack项目-本地(localhost)和ip(192.168.xx.xx) 打开
q1452751939的博客
01-13 2120
webpack配置的项目如何在本地手机访问
weixin_44777146的博客
10-12 497
默认情况下 webpack-dev-server只能通过 localhost 访问 如果需要通过 ip在同一无线网的手机上访问，首先在package.json中找到启动项 然后 启动项后面插入 --host 你的ip地址 然后就可以通过ip地址+端口号进行手机访问 ...
webpack构建的项目配置ip运行地址
你猜我猜不猜
04-01 7406
我们平常在做vue或者react项目时，往往会使用脚手架直接搭建，有些脚手架会封装好使用本地的ip进行项目的访问，但是有些时候我们使用npm run dev或者npm start运行项目，发现只有localhost:8080类似的访问地址，这个时候如果我们有额外的需求，不如用手机来访问看看效果，会发现localhost这个地址是生成不了二维码的，这个时候我们就需要自己动手去配置。目前我所了解的方式...
5. webpack-dev-server代替proxy,允许外部IP访问
黄彪博客
01-20 3308
文章目录文章参考安装 webpack-dev-serverpackage.json 添加 scripts 命令，启动 webpack-dev-serverwebpack.config.js 配置属性说明打开指定端口默认打开浏览器外部地址可以访问支持httpsHMR (热模块替换)proxy 代理转发 文章参考 webpack-dev-server github 开发中 Server(devSer...
Web前端框架应用：第8章 服务器端渲染-webpack搭建及渲染框架.pptx
06-07
8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 webpack搭建服务器端渲染;8.3 ...
webpack本地开发环境无法用IP访问的解决方法
11-28
在进行Web应用开发时，我们通常会使用诸如webpack这样的构建工具来搭建本地开发环境。然而，在实际工作中，可能会遇到一个问题，即本地开发环境只能通过`http://localhost:8080`来访问，而不能使用`http://本机IP:...
解决webpack无法通过IP地址访问localhost的问题
08-27
执行这个命令后，Webpack Dev Server会启动并监听所有网络接口，外部设备可以通过你的局域网IP地址来访问本地开发服务器。 4. **注意事项** - 添加`--host 0.0.0.0`后，请确保你的防火墙设置允许其他设备访问该...
webpack搭建vue 项目的步骤
08-28
Webpack 搭建 Vue 项目的步骤 本文将详细讲解如何使用 Webpack 搭建 Vue 项目，包括前期准备、创建项目、引入 Webpack、引入 Vue、引入 Babel 等步骤。 一、前期准备 在开始搭建 Vue 项目之前，需要安装 Node.js ...
完美解决通过IP地址访问VUE项目的问题
10-15
如果需要让其他设备（如手机或另一台电脑）访问我们的Vue应用，我们就需要通过IP地址来访问。本文将详细介绍如何完美解决通过IP地址访问Vue项目的问题。 首先，我们需要对Vue项目的配置文件进行更改。在Vue项目中，...
一、Webpack基本配置及使用
u012732909的博客
05-17 889
一、Webpack基本配置及使用 1、安装本地Webpack webapck webpack-cli -D // -D 表示上线不需要打这个包 // 初始化一下，记录安装的依赖 yarn init -y // 5.2支持的npx语法可以直接执行webpack // 默认去找node_modules下面的bin文件里面的webpack.cmd npx webpack 2、 Webpack可以0配置 打包工具 -> 输出后的结果(js模块) 打包 -> 支持js模块化 //
解决webpack使用ip访问
Minyoung 的博客
06-12 4191
设置如下，既可以用ip又可以用localhost访问
解决webpack本地开发环境无法用IP访问
Maggie的博客
04-06 2664
问题描述:只能用http://localhost:8080/访问项目,不能用http://本机IP:8080访问解决方案:webpack dev配置文件中加上 host:’0.0.0.0’ 
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将端口号http://localhost:8080/ 改成本机IP地址:192.168.1.103:8080/，在局域网内访问，方法如下：
热门推荐
麻球科技
03-13 2万+
找到config文件下的index.js 将host: 'localhost', // can be overwritten by process.env.HOST 改为：host: '192.168.1.103', // can be overwritten by process.env.HOST即可，在浏览器输入192.168.1.103:8080/即可访问...
webpack-dev-server 配置服务器外部（内网）可以访问
wang_kai_7的博客
01-11 8450
webpack-dev-server官网的说明是：配置host， 如下： 我自己的相关配置如下： // webpack.config.js devServer: { port: 8888, host: '0.0.0.0 } // 命令行中 webpack --host 0.0.0.0 然后发现访问失败，但是访问：localhost:8888和127.0.0.1:888...
webpack-dev-server远程访问配置
jCuckoo的专栏
03-29 8393
下面的package.json文件中配置的webpack-dev-server为开发模式，可以使用http://localhost:8080或http://127.0.0.1:8080进行访问 "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
webpack-dev-server开启外网访问
培根芝士的专栏
11-25 1211
通过命令行启动 webpack-dev-server --env dev --host 192.168.1.100 或者修改 package.json "scripts": { "dev": "webpack-dev-server --inline --host 192.168.1.100" }, 也可以修改webpack.dev.js devServer: { historyApiFallback: true, inline.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值