一般使用 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 。
這樣更加方便真機調試，無需部署到服務器就可以進行訪問和測試。
聲明：本文由德順原創，轉載請註明出處：《Vue項目無法使用局域網IP直接訪問的配置方法》 https://www.w3h5.com/post/459.html