Vue項目沒法使用局域網IP直接訪問的配置方法

通常使用 vue-cli 下來的項目是能夠直接訪問局域網 IP 打開的，好比 192.168.1.11:8080 。可是最近公司的一個項目只能夠經過 localhost 訪問。

須要配置一下，纔可直接用局域網 IP 訪問，方法以下：

給 dev 添加--host 0.0.0.0 屬性：

"scripts": {   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",   "start": "npm run dev",   "unit": "jest --config test/unit/jest.conf.js --coverage",   "test": "npm run unit",   "build": "node build/build.js" },

這樣就能夠用手機訪問電腦的 IP 直接打開項目網站了。

若是仍是沒法訪問，須要配置一下電腦的防火牆，把所需的端口（如：8080）打開。

設置方法以下：

Windows 10 ，搜索「控制面板」，打開，Windows 7 能夠直接在開始菜單打開。

點擊「Windows Defender防火牆」——「高級設置」——新建「入網規則」。

規則類型選擇「端口」，下一步「特定本地端口」填 8080-8088 （此處是一個 IP 段，由於若是打開多個項目，端口會被佔用， Vue會自動分配一個新的端口。如：8081 ）。

下一步「容許鏈接」，下一步選擇開放的場景，我選的是前兩個，下一步輸入規則名稱，點擊「完成」便可。

這樣用手機訪問電腦 IP 加端口號，192.168.1.11:8080 就能夠打開項目了。

獲取電腦 IP 的方法：

Win + R 運行「cmd」，輸入 ipconfig 回車, 就能夠看到本身的IP了，好比個人 192.168.2.103 。

這樣更加方便真機調試，無需部署到服務器就能夠進行訪問和測試。

聲明：本文由w3h5原創，轉載請註明出處：《Vue項目沒法使用局域網IP直接訪問的配置方法》 https://www.w3h5.com/post/459.html

原文出處：https://www.cnblogs.com/deshun/p/12075520.html