vue-cli启动本地服务,局域网下通过ip访问不到的原因

本文介绍了解决新开发的Vue-cli项目在手机上无法访问的问题,详细说明了如何修改配置文件使得在同一局域网下的设备能够通过IP地址访问项目。

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

1.问题描述:

        新开发了一个vue-cli项目,想通过手机查看效果,发现访问不到,ip地址和端口号都没错但是手机访问不到,在本机电脑浏览器输入ip端口号一样访问不到,只能通过localhost:8080访问到,同一局域网下其他的手机和电脑并不能通过ip地址访问调试,

2.原因:vue-cli项目是通过命令行一键生成的,配置文件中默认生成的是本地调试模式,默认访问地址是localhost:8080

3.改正的方式

    找到config文件夹下的index.js文件,修改host:“localhost”为 host:"0.0.0.0",此时同一局域网下的手机和其他电脑能通过ip+端口号查看到页面

转载于:https://www.cnblogs.com/lst619247/p/8334792.html

### 局域网部署 Express 轻量级服务并使 Vue 应用适应 IP 地址变更 #### 部署 Express 服务 为了在局域网内部署一个基于 Node.js 的 Express 服务,需先创建一个新的 Express 应用实例。由于 Node.js 内置了 HTTP 协议支持,这简化了应用程序的开发与部署流程[^1]。 ```javascript const express = require('express'); const app = express(); const port = process.env.PORT || 3000; app.get('/', (req, res) => { res.send('Hello from Express!'); }); // 启动服务器监听指定端口,并允许来自任何主机名的请求 app.listen(port, '0.0.0.0', () => { console.log(`Server running at http://localhost:${port}/`); }); ``` 这段代码设置了一个简单的 Web API 接口,它会在启动时绑定到所有可用接口 (`0.0.0.0`) 上,这意味着不仅限于 localhost 或特定 IP 地址,而是接受来自同一网络内的任意设备发起的连接尝试。 #### 处理 IP 地址变化后的访问配置 当服务器所在的机器 IP 发生变动时,客户端(本例中指 Vue 前端应用)可能无法继续通过旧地址访问后端服务。解决此问题的方法之一是在构建阶段动态获取当前有效的 IP 地址,并将其传递给前端项目作为 API 请求的基础 URL。 对于 Vue CLI 构建工具而言,在 `vue.config.js` 文件里定义环境变量是一种常见做法: ```javascript module.exports = { devServer: { proxy: { '/api': { target: getBackendUrl(), // 动态函数用于取得最新的 backend url changeOrigin: true, pathRewrite: { '^/api': '' } } } }, }; ``` 其中 `getBackendUrl()` 函数可以根据实际情况设计成读取文件、命令行参数或是调用外部 API 来获得最新 IP 和端口号组合而成的目标地址字符串。 另外一种方法是利用 DNS 解析机制,如果条件允许的话可以在路由器级别设定固定域名指向本地服务器;这样即使物理位置发生变化也不影响名称解析结果,从而保持前后端通信稳定不受影响。 #### 实现跨平台兼容性 考虑到不同操作系统间可能存在差异,建议采用通用的方式处理路径和其他系统特性相关的问题。比如使用 Node.js 提供的标准模块如 `path` 来操作文件路径,而不是硬编码斜杠分隔符等具体细节。 此外,确保所使用的依赖项版本一致也很重要,尤其是在团队协作环境中更应该注意这一点。可以通过锁定 package.json 中的 dependencies 版本来达成这一目标。 最后值得注意的是安全性方面考量,虽然这里讨论的情景主要针对私有内网场景下的快速原型搭建或小型项目实施,但在生产环境下应当遵循最佳实践指南加强安全防护措施,例如启用 HTTPS 加密传输通道以及合理配置防火墙策略等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值