webpack无法通过局域网访问localhost

最新推荐文章于 2023-09-14 15:33:47 发布
原创 最新推荐文章于 2023-09-14 15:33:47 发布 · 707 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web #react

本文介绍如何在手机浏览器上访问本地运行的开发服务器，如使用Webpack-dev-server时，通过修改package.json文件中的start脚本，加入--host0.0.0.0参数，使服务器监听所有网络接口，从而实现跨设备访问。 
// package.json
 "scripts": {
		"start": "webpack-dev-server --open --mode development --host 0.0.0.0 or 192.168.8.8",
   		"build": "webpack -p",
  },

假设你本机内网ip 是192.168.8.8， 想通过手机浏览器访问 locahost:3000， 然后发现访问不了，
在项目的package.json里
”start“ 那一行加上“–host 0.0.0.0” 或者本机内网ip，
重启项目 ，手机浏览器输入 192.168.8.8:3000
就可以访问了，撒花★,°:.☆(￣▽￣)/$:.°★
不用打开端口3000！~

---------------------------------------update-------------------------------------------

突然发现 vue create的项目自动部署到局域网了！很方便贴心有木有，有空填坑如何实现的

---------------------------------------update-------------------------------------------
create-react-app 的其实也可以，好像是dell的网卡不行，只能加个host了，但是这样就得用ip访问，这个问题有空填坑

webpack本地开发环境无法用IP访问的解决方法
11-28
问题描述： 只能用http://localhost:8080访问项目,不能用http://本机IP:8080访问 解决方案： webpack dev配置文件中加上 host:’0.0.0.0′ 以上这篇webpack本地开发环境无法用IP访问的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
webpack vue项目开发环境局域网访问方法
08-27
总的来说，通过以上步骤，你就能成功地在Webpack和Vue的开发环境中设置局域网访问，让团队成员能够实时共享和测试代码，提升协同开发的效率。请记住，安全是首要考虑的因素，不要在不安全的网络环境下开启这种设置，...
【webpack】记录hmr失效解决方案
不忘初心，坚定道路！
11-11 2283
前言 最近遇到个问题，由于登陆系统使用单点登陆加应用使用微前端，开发时使用xswitch插件进行拦截代理，然后导致每次修改完代码需要手动刷新浏览器更新。特此寻找了解决方法。后发现每次都会刷新浏览器而不是热重载，经过探索后成功不刷新浏览器热重载。 解决方法 1、首先需要保证ws服务正常。由于未使用localhost域名导致会尝试建立访问域名的ws服务。 找到node_modules下_react-dev-utils这个包 其中有个文件叫webpackHotDevClient.js文件，第58行修改协议hos
webpack配置host:‘0.0.0.0‘之后本地ip访问依然无法打开
weixin_41492957的博客
10-21 4499
webpack配置host:'0.0.0.0’之后本地ip访问依然无法打开 1.修改config/index.js open: 'http://127.0.0.1:8080', host: '0.0.0.0', // 0.0.0.0设置手机端可以访问 port: 8080, useLocalIp: true, disableHostCheck: true, 2.ip访问依然报错 找到index.html中 <meta http-equiv="Content-Se
WebPack Invalid Host header: 局域网不能访问开发服务器
LILAIQUN博客
01-04 1371
从其他设备访问局域网的Web项目，您可能遇到了Invalid Host header，它不允许您检查您的项目在这个设备上的外观。 在这篇文章中，我们将给你2的解决方法来访问您的开发服务器从局域网。 指定你的主机 您可以通过在命令行中运行公共命令，例如在公共命令行中设置公共标志和IP和端口作为参数，或者在命令行中直接运行命令，从而指定可以公开访问您的开发服务器的IP。例如：192.168.
解决vue-cli构建本地项目，无法通过本机ip访问的问题
逆水行舟，不进则退
07-11 7081
问题vue init webpack myproject构建项目 使用localhost 或者127.0.0.1 均可以正常访问，但是切换到本地ip就不行了解决方式在 webpack.dev.conf.js 追加以下代码const HOST = process.env.HOST || '0.0.0.0';1重新启动npm run dev1重新打开即可...
解决webpack无法通过IP地址访问localhost的问题
08-27
本文将深入探讨如何解决Webpack无法通过IP地址访问localhost的问题。 1. **问题背景与描述** 开发过程中，开发者通常会使用Webpack Dev Server来启动一个本地开发服务器，它提供了热加载、自动刷新等便捷功能。...
vue-cli启动本地服务局域网不能访问的原因分析
01-19
 本地vue-cli启动了一个项目只能通过localhost:8080访问到，同一局域网下其他的手机和电脑并不能通过ip地址访问调试， 2.原因：vue-cli项目是通过命令行一键生成的，配置文件中默认生成的是本地调试模式，默认访问...
webpack无法通过 IP 地址访问 localhost 解决方案
weixin_34185320的博客
02-18 958
默认情况下 webpack-dev-server 只能通过 localhost 访问，如果需要通过 ip 地址访问，修改 package.json文件中的 scripts 属性中启动脚本，在dev后加入本机的ip地址。 "scripts": { "dev": "webpack-dev-server --inline --pro...
webpack运行没有本地访问地址
x_neee的博客
09-14 274
host:'192.168.5.20',//本地地址。在webpack.dev.config.js。port:8080,//端口号。
解决局域网访问不了计算机
06-11
解决局域网访问不了计算机 实现局域网计算机之间的互相访问，资源的共享
【vue-cli】vue-cli+webpack配置下局域网，手机无法访问绑定ip的vue项目
z767327552的专栏
03-08 6804
http://192.168.0.104:8080/#/    访问我的vue项目，浏览器可以打开，手机无法打开，在同一局域网段下。1.设置config文件下的index.js文件： dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, /...
解决webpack-dev-server端口搭建成功，却无法在浏览器访问问题
m0_46177521的博客
07-06 3726
今天了解到webpack-dev-server是一个小型的Node.js Express服务器，拥有及时编译的功能。 但是在搭建中发现。 可见webpack-dev-server已经搭建成功了服务器， 但是我们将http://localhost:8088地址复制进Chrome却无法响应。进入cmd 输入netstat -na 发现本地端口中并没有8088接口。 解决办法： 在webpack.config.js配置文件中 将自启浏览器设置为true ...
webpack配置中遇到localhost无法开启本地服务器的时候
qq_48704579的博客
02-21 362
开启本地服务器
websock + vue +webpack配置
ii窝窝头的博客
08-05 244
webpack this.webSocket = new WebSocket(`wss://${location.host}/websocket/${this.resourceId}/${this.name}`); this.webSocket.onopen = function () { console.log('open') }; this.webSocket.onerror = function () { console.l.
webpack学习8-配置对象常用属性详解
wangrong111222的博客
06-26 677
1. entry 1. 配置为字符串，单一文件输出， 针对单页面 entry: './src/index.js', 2. 配置为数组，多文件输入，单文件输出， 针对 hmr 中html 不更新的情况 entry: [ './src/index.js','./src/print.js'], 3. 配置为对象{} 输出多个文件 ，key就是文件名 ，针对多页面 类似于jq的老式前端应用 entry: { index: './src/index.js', print: '.
Webpack 基础配置介绍（二）
享白
09-12 397
今天继续分享webpack的有关内容！ 今日分享： webpack的规范配置，webpack.config.js基础配置、单页开发【单文件打包】、多页开发【多文件打包】、glob配置动态入口打包多文件、哈希Hash、以及一些常用命令。 文章目录： 一、前言： 提到 webpack 的配置方案、插件等，相信很多小伙伴都有了解，网上也有很多关于webpack的配置说明，但都是参差不齐。博主会陆续带大家对它进行全面剖析！ 1、webpack的基础配置： webpack的配置分为三...
webpack代理 host文件 微信小程序公众号开发必配
weixin_43954090的博客
02-04 956
需求：在开发公众号的时候必然会遇到很多页面跳转，例如用户点击分享跳进来的问题，进入不同详情页的问题，域名回调的作用， 如果想本地调试的话，需要以下配置。 本地host文件配置： 配置host文件，当在浏览器访问localhost或者127.0.0.1的时候，会去访问对应的域名为m.imooc.com这台主机。 作用：输入域名匹配ip，当输入m.51purse.com或者m.imooc.com时匹配...
解决vue项目不能局域网中用ip访问
nongcunqq的博客
09-04 900
1.build目录下webpack.dev.conf.js，添加 disableHostCheck: true, 2.config目录下，host改为0.0.0.0 host: '0.0.0.0', // can be overwritten by process.env.HOST
前端在同一局域网下访问其他电脑后端地址
最新发布
09-27
前端在同一局域网下访问其他电脑后端地址，有以下几种常见方法： - **直接修改接口地址**：把前端代码中的接口地址，从本地的 `localhost` 端口换成“后端 IP：端口号”。比如后端局域网 IP 地址为 192.168.3.108，运行端口号为 8080，则需要将接口地址改为 `http://192.168.3.108:8080`，路径名正常根据后端要求配置即可 [^3]。 - **针对不同后端框架的处理**： - **Flask 框架**：Flask 框架默认监听 127.0.0.1，仅本地可访问。若要在局域网内被其他设备访问，需将应用绑定到 0.0.0.0 地址。示例代码如下： ```python from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run(host='0.0.0.0', port=5000) ``` 绑定到 0.0.0.0 后，应用会监听所有网络接口的请求，包括局域网 IP 地址。在同一局域网内的其他设备上，使用该电脑的局域网 IP 地址和端口号（如 `http://192.168.1.100:5000`）即可访问应用 [^2]。 - **Vue 项目**：正常启动项目时，需指定 `--host` 为被访问电脑的局域网 IP 地址。在 `package.json` 的 `scripts` 中进行配置： ```json "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.30.100" } ``` 然后使用 `cnpm run dev` 或 `npm run dev` 启动项目。这样，同一局域网内的其他设备就可以通过该 IP 地址和端口访问 Vue 项目 [^4]。 - **Tomcat 项目**： - 查看本机的 IP 地址，进入 cmd，输入 `ipconfig`，查看本机的 IPv4 地址。 - 修改 Tomcat 的配置文件，进入 Tomcat 文件夹下的 `conf` 文件夹，进入 `server.xml` 文件，更改 `<Engine>` 中的 `defaultHost="本机 IP 地址"`，更改 `<Host name="本机 IP 地址">`，修改完毕后点击保存。 - 启动 Tomcat 项目，同一局域网下的其他主机访问此端口，也能访问成功 [^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值