如何用外部電腦訪問本地網頁?

之前本來說用內網穿透工具來查看完成這個工具,結果感覺各種不符合心意,突然發現有更簡單的方法。

如果想讓兩臺電腦在 同一局域網 內都能訪問運行在 http://localhost:5174/ 上的項目,而不需要使用內網穿透工具,可以通過以下方法實現:

使用局域網 IP 地址

  1. 找到本機的局域網 IP 地址

    • 在 Windows 系統下,打開命令提示符(CMD),輸入 ipconfig,找到以 192.168.x.x10.x.x.x 開頭的 IPv4 地址。

    • 在 macOS 或 Linux 系統下,打開終端,輸入 ifconfigip a,找到對應的局域網 IP 地址。

  2. 修改 Vite 配置

    • 在項目的 vite.config.tsvite.config.js 文件中,找到 server 配置項,將 host 設置為 0.0.0.0,這樣可以讓服務器監聽所有網絡接口,而不僅僅是本地回環接口。

      JavaScript

      復制

      import { defineConfig } from 'vite';
      import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],server: {host: '0.0.0.0', // 允許通過局域網 IP 訪問port: 8080,},
      });
  3. 啟動項目

    • 啟動項目后,使用另一臺電腦在瀏覽器中輸入 <你的局域網 IP 地址>:<端口號>,例如 http://192.168.1.1:8080,即可訪問。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/95947.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/95947.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/95947.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

PromptPilot — AI 自動化任務的下一個環節

作者:陳大魚頭 github:https://github.com/KRISACHAN 郵箱:chenjinwen77@gmail.com PromptPilot 體驗地址:https://promptpilot.volcengine.com/ 前言 如果大家有關注 AI 相關新聞的話,一定會知道在 2025 年 6 月 11 日火山引擎 FORCE 原動力大會上,豆包大模型 1.6 系列…

[Responsive theme color] 動態更新 | CSS變量+JS操控 | 移動端-漢堡菜單 | 實現平滑滾動

第3章&#xff1a;CSS變量操控 歡迎回來&#x1f43b;??? 通過前兩章&#xff0c;我們掌握了 動態主題定制 的交互邏輯&#xff0c;以及 色彩工具函數 如何實現色值格式轉換。 本章將揭示技術拼圖的最后一塊&#xff1a;CSS變量動態操控&#xff0c;解析JavaScript如何實…

數學建模 15 邏輯回歸與隨機森林

邏輯回歸&#xff08;用于分類&#xff09;用途&#xff1a;通過已有數據&#xff0c;計算出線性方程的參數w后&#xff0c;可以用于預測某一個物品屬于某一類的概率&#xff0c;[0,1];求解思想&#xff1a;邏輯回歸通過最大似然估計&#xff08;Maximum Likelihood Estimation…

衡石使用指南嵌入式場景實踐之儀表盤嵌入

應用展示交互 應用集市展示應用時會與儀表盤、圖表進行交互操作&#xff0c;主要包括去分析、保存當前過濾快照、字段設置、刷新、全屏、嵌入、導出等功能。 保存當前過濾快照 儀表盤展示數據時往往使用過濾器來查看不同場景下的分析數據。用戶從一種場景切換到另一種場景&a…

Qt | 四種方式實現多線程導出數據功能

前言 在以往的項目開發中&#xff0c;在很多地方用到了多線程。針對不同的業務邏輯&#xff0c;需要使用不同的多線程實現方法&#xff0c;來達到優化項目的目的。本文記錄下在Qt開發中用到的多線程技術實現方法&#xff0c;以導出指定范圍的數字到txt文件為例&#xff0c;展示…

運放的學習筆記以及一些用法的個人看法

負反饋形成了虛短。 你的輸出會對-極產生一個向上的電壓&#xff0c;當你的-的時候就兩邊相等了&#xff0c;這個時候就輸出就不變了&#xff0c;也就是負反饋調節&#xff0c;調節了左邊的電壓差 如果你的右邊輸出已經達到了12v或者0v這個時候你就飽和了&#xff0c;這個時候…

MySQL的三大范式:

目錄 鍵和相關屬性的概念&#xff1a; 第一范式&#xff1a; 第二范式&#xff1a; 第三范式&#xff1a; 總結&#xff1a; 反范式化&#xff1a; 在關系型數據庫中&#xff0c;關于數據表設計的基本原則&#xff0c;規則就稱為范式。 范式是關系數據庫理論的基礎&…

如何解決pip安裝報錯ModuleNotFoundError: No module named ‘imageio’問題

【Python系列Bug修復PyCharm控制臺pip install報錯】如何解決pip安裝報錯ModuleNotFoundError: No module named ‘imageio’問題 摘要 在Python開發過程中&#xff0c;尤其是使用PyCharm等IDE時&#xff0c;遇到pip install報錯是一個常見的問題&#xff0c;尤其是在執行安裝…

2025年高效能工程項目管理軟件推薦榜單:AI重構工程進度可視化與資源動態調度體系

在工程行業數字化深度變革的2025年,項目管理正面臨前所未有的挑戰與機遇。權威數據顯示,68%的工程項目因進度追蹤滯后導致交付延期,超半數企業因數據孤島陷入跨部門協同效率低下的困境,而資源錯配造成的隱性成本損失高達年度預算的15%。隨著AI決策引擎、BIM全流程融合、IoT物聯…

豆包 Java的23種設計模式

Java的23種設計模式是軟件開發中常用的設計思想總結&#xff0c;根據用途可分為三大類&#xff1a;創建型、結構型和行為型。 一、創建型模式&#xff08;5種&#xff09; 用于處理對象創建機制&#xff0c;隱藏創建邏輯&#xff0c;使程序更靈活。 單例模式&#xff1a;保證一…

Redis7學習--詳解哨兵,文件配置、主客觀下線

目錄 一、前言 二、哨兵 1、是什么&#xff1f; 2、哨兵的功能 3、案例演示 Redis Sentinel 架構 配置說明 哨兵配置文件 主從配置文件 主節點宕機后各節點狀態 主從切換后配置文件的自動調整 4、哨兵運行流程和選舉原理 SDOWN主觀下線 ODOWN客觀下線 選出新的主節…

Android 項目:畫圖白板APP開發(二)——歷史點、數學方式推導點

上一章我們講解了如何繪制順滑、優美的曲線&#xff0c;為本項目的繪圖功能打下了基礎。本章我們將深入探討兩個關鍵功能的實現&#xff1a;歷史點和數學方式推導點。這些功能將大幅提升我們白板應用的專業性和用戶體驗。一、History點之前在onTouchEvent中獲取的MotionEvent&a…

25. for 循環區別

1. 基本 for 循環 for (let i 0; i < 10; i) {console.log(i); }特點&#xff1a; 適用于已知循環次數的情況使用數字索引進行迭代可以精確控制循環過程性能最好&#xff0c;開銷最小 2. for…in 循環 // 數組示例 for (let i in [1, 2, 3]) {console.log(i, typeof i); //…

Trae 輔助下的 uni-app 跨端小程序工程化開發實踐分享

大家好&#xff0c;我是不如摸魚去&#xff0c;歡迎來到我的AI編程分享專欄。 這次來分享一下&#xff0c;我使用 Trae 作為主要AI編程工具&#xff0c;開發 uni-app 跨平臺小程序的完整實踐經驗。我在實際的開發過程中&#xff0c;探索了 Trae 輔助開發的具體應用場景和效果&…

Vue3 + Element Plus 人員列表搜索功能實現

設計思路使用Element Plus的el-table組件展示人員數據 在姓名表頭添加搜索圖標按鈕 點擊按鈕彈出搜索對話框 在對話框中輸入姓名進行搜索 實現搜索功能并高亮匹配項下面是完整的實現代碼&#xff1a;<!DOCTYPE html> <html lang"zh-CN"> <head><…

告別手動優化!React Compiler 自動記憶化技術深度解析

概述 React Compiler 是 React 團隊開發的一個全新編譯器&#xff0c;目前處于 RC&#xff08;Release Candidate&#xff09;階段。這是一個僅在構建時使用的工具&#xff0c;可以自動優化 React 應用程序&#xff0c;無需重寫任何代碼即可使用。 核心特性 自動記憶化優化 …

【從零開始學習Redis】項目實戰-黑馬點評D2

商戶查詢緩存 為什么用緩存&#xff1f;作用模型緩存流程按照流程編寫代碼如下 Service public class ShopServiceImpl extends ServiceImpl<ShopMapper, Shop> implements IShopService {Resourceprivate StringRedisTemplate stringRedisTemplate;Overridepublic Resul…

后端Web實戰-MySQL數據庫

目錄 1.MySQL概述 1.1 安裝 1.1.1 版本 1.1.2 安裝 1.1.3 連接 1.2 數據模型 1.3 SQL簡介 1.3.1 分類 1.3.2 SQL通用語法 2.DDL 2.1 數據庫操作 2.2 圖形化工具 2.2.1 使用 2.3 表操作 2.3.1 創建表 2.3.1.1約束 2.3.1.2 數據類型 2.3.1.3 案例 2.3.2 DDL&am…

開源數據發現平臺:Amundsen 本地環境安裝

Amundsen 是一個數據發現和元數據引擎&#xff0c;旨在提高數據分析師、數據科學家和工程師與數據交互時的生產力。目前&#xff0c;它通過索引數據資源&#xff08;表格、儀表板、數據流等&#xff09;并基于使用模式&#xff08;例如&#xff0c;查詢頻率高的表格會優先于查詢…

ubuntu18.04部署cephfs

比起君子訥于言而敏于行&#xff0c;我更喜歡君子善于言且敏于行。 目錄 一. 準備工作&#xff08;所有節點&#xff09; 1. /etc/hosts 2. 安裝python2 3. 配置普戶免密sudo 4. 準備好四塊盤&#xff0c;一塊hddsdd為一組&#xff0c;一臺設備上有一組 5. 添加源 二. 安…