假设我通过192.168.1.1，访问vue的一个页面，我在页面上怎么输出当前的ip地址，也就是192.168.1.1

### Nginx 配置 80 端口访问被拒绝问题的解决方法 当配置 Nginx 的 80 端口后无法访问时，通常可能是由于以下原因导致：Nginx 配置文件错误、防火墙规则未正确设置或端口被其他服务占用。以下是详细的排查与解决方案。 --- #### 检查 Nginx 配置文件 确保 Nginx 配置文件中 `server_name` 和 `proxy_pass` 设置正确。以下是一个典型的 Nginx 配置示例： ```nginx server { listen 80; server_name 192.168.1.1; # 替换为服务器的实际 IP 地址[^4] location / { root /var/www/html; # 替换为前端项目的根目录路径 index index.html index.htm; try_files $uri /index.html; # 解决 Vue 路由模式下的 404 问题[^3] } location /api/ { proxy_pass http://127.0.0.1:8080/; # 替换为目标后端服务的地址和端口[^1] proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 完成修改后，使用以下命令检查配置文件语法是否正确并重新加载 Nginx： ```bash sudo nginx -t sudo systemctl reload nginx ``` --- #### 检查防火墙规则 如果服务器启用了防火墙（如 `firewalld` 或 `ufw`），需要确保 80 端口已开放。以下是开放 80 端口的命令： - **对于 `firewalld`**： ```bash sudo firewall-cmd --permanent --add-port=80/tcp sudo firewall-cmd --reload ``` - **对于 `ufw`**： ```bash sudo ufw allow 80/tcp sudo ufw reload ``` 验证端口是否开放： ```bash sudo netstat -tuln | grep :80 ``` 如果没有看到 `:80` 的监听信息，则可能是 Nginx 未正确启动或端口被其他服务占用。 --- #### 检查端口占用情况 80 端口可能被其他服务（如 Apache）占用。可以使用以下命令检查端口占用情况： ```bash sudo lsof -i:80 ``` 如果有其他进程占用了 80 端口，可以选择停止该服务或更改其监听端口。例如，停止 Apache 服务： ```bash sudo systemctl stop apache2 ``` --- #### 确保 Nginx 正常启动 完成配置后，确保 Nginx 服务已正常启动： ```bash sudo systemctl status nginx ``` 如果 Nginx 未启动，可以尝试重新启动服务： ```bash sudo systemctl restart nginx ``` --- #### 测试反向代理功能 在浏览器中访问服务器的 IP 地址或域名，确认前端页面是否正常加载。同时，可以通过以下方式测试 API 接口是否正常代理： - 假设后端 API 地址为 `http://localhost:8080/api/test`，则通过 Nginx 访问应为 `http://your_server_ip/api/test`。 --- ### 常见问题排查 - **问题：Vue 路由出现 404 错误** 如果使用的是 Vue 的 `history` 路由模式，需要在 Nginx 配置中添加 `try_files $uri /index.html`，以确保所有未匹配的路径都返回 `index.html`[^3]。 - **问题：API 请求失败** 检查 `proxy_pass` 的目标地址是否正确，并确保后端服务已启动且监听指定端口。 - **问题：Nginx 日志显示 502 Bad Gateway** 这通常是由于后端服务未运行或网络连接问题导致。检查后端服务状态并确保网络连通性。 ---

### 手机连接电脑上的 Vue 项目调试方法 为了实现手机连接到运行 Vue 项目的电脑并进行调试，可以按照以下方式操作： #### 获取电脑 IP 地址 在电脑上按下 `Windows + R` 组合键，输入 `cmd` 启动命令提示符窗口。接着，在命令行中输入 `ipconfig` 命令来查看网络配置信息。找到对应无线局域网 (WLAN) 的 IPv4 地址，这是用于让其他设备在同一局域网内访问的关键地址[^3]。 #### 配置 Vue 开发服务器允许外部访问 默认情况下，Vue CLI 或 Vite 构建工具启动的服务仅限于本地回环地址 (`localhost`) 访问。如果希望同一局域网中的其他设备能够访问，则需要调整服务的绑定地址以及可能存在的跨域设置。 对于基于 **Vite** 的项目，默认已经支持通过指定主机名的方式开放给同网段内的设备访问。只需确保启动脚本未显式限制为 localhost 即可正常工作[^2]。 #### 在手机浏览器中访问 当上述准备工作完成后，可以在手机浏览器里输入类似于这样的 URL 来加载网页资源： ```plaintext http://<电脑IPv4>:<端口号>/ ``` 例如，假设电脑的 WLAN IPv4 是 `192.168.1.100` 并且 vue 应用正在监听 `3000` 端口，则完整的路径应写成如下形式： ```plaintext http://192.168.1.100:3000/ ``` #### 考虑安全性因素 值得注意的是，虽然这种方法方便快捷，但在实际应用过程中应当考虑到网络安全方面的要求。比如避免暴露敏感数据或者功能接口给未经授权的人士接触到。因此建议只在一个受信任的家庭或办公室内部署此类临时解决方案[^4]。 ```bash # 查看当前机器IP地址样例命令 C:\Users\YourName> ipconfig 以太网适配器 Ethernet: 连接特定的 DNS 后缀 . . . . . : example.com 本地链接 IPv6 地址. . . . . . : fe80::a:b:c:d%12 子网掩码 . . . . . . . . . . . : 255.255.255.0 默认网关. . . . . . . . . . . . : 192.168.1.1 无线局域网适配器 Wi-Fi: 连接特定的 DNS 后缀 . . . . . : IPv4 地址. . . . . . . . . . . : 192.168.1.100 <-- 使用这个作为目标URL的一部分 子网掩码 . . . . . . . . . . . : 255.255.255.0 默认网关. . . . . . . . . . . . : 192.168.1.1 ```