一般使用 vue-cli 下來的項(xiàng)目是可以直接訪問局域網(wǎng) IP 打開的，比如 192.168.1.11:8080 。但是最近公司的一個(gè)項(xiàng)目只可以通過 localhost 訪問。

需要配置一下，才可直接用局域網(wǎng) 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"

},

這樣就可以用手機(jī)訪問電腦的 IP 直接打開項(xiàng)目網(wǎng)站了。

如果還是無法訪問，需要配置一下電腦的防火墻，把所需的端口（如：8080）打開。

設(shè)置方法如下：

Windows 10 ，搜索“控制面板”，打開，Windows 7 可以直接在開始菜單打開。

點(diǎn)擊“Windows Defender防火墻”——“高級(jí)設(shè)置”——新建“入網(wǎng)規(guī)則”。

規(guī)則類型選擇“端口”，下一步“特定本地端口”填 8080-8088 （此處是一個(gè) IP 段，因?yàn)槿绻蜷_多個(gè)項(xiàng)目，端口會(huì)被占用， Vue會(huì)自動(dòng)分配一個(gè)新的端口。如：8081 ）。

下一步“允許連接”，下一步選擇開放的場(chǎng)景，我選的是前兩個(gè)，下一步輸入規(guī)則名稱，點(diǎn)擊“完成”即可。

這樣用手機(jī)訪問電腦 IP 加端口號(hào)，192.168.1.11:8080 就可以打開項(xiàng)目了。

獲取電腦 IP 的方法：

Win + R 運(yùn)行“cmd”，輸入 ipconfig 回車, 就可以看到自己的IP了，比如我的 192.168.2.103 。

這樣更加方便真機(jī)調(diào)試，無需部署到服務(wù)器就可以進(jìn)行訪問和測(cè)試。

聲明：本文由w3h5原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處：《Vue項(xiàng)目無法使用局域網(wǎng)IP直接訪問的配置方法》?https://www.w3h5.com/post/459.html