Nuxt3 在 localhost 以外的地方開啟網頁

在 Nuxt 中可以使用下面的指令啟動一個開發伺服器：

    
npm run dev
    

執行畫面如下：

我們就可以在 http://localhost:3000/ 中檢視這個網頁。

但是如果我們要在區域網路中的其他台電腦會無法瀏覽，就連本機瀏覽本機的 ip 甚至是 127.0.0.1 都無法瀏覽。

我們可以在 nuxt.config.ts 這裡增加下面的程式碼，讓 Nuxt3 內建的開發伺服器接受來自任何伺服器的 ip 連線，這樣就可以方便在區域網路中的其他裝置連線到這個網頁：

    
export default defineNuxtConfig({
    devtools: {enabled: true},
    devServer: {
        port: 3000,
        host: '0.0.0.0'
    }
})
    

重新執行後就會發現指令視窗中的輸出內容多了幾個 ip，這個是筆者的區域網路 ip ，和筆者同一個區域網路的話就可以從這幾個連結連進來。

這時候再測試 127.0.0.1 + port ，就會發現可以連線了，然後再測試上面列出來的 ip ，如果無法連線的話很可能是因為防火牆沒有允許特定的連接埠連接，可以先關閉所有防火牆做測試，如果可以的話就代表是防火牆的問題，Windows 可以到「具有進階安全性的 Windows Defender 防火牆」中增加一個「輸入規則」允許 3000 連接埠輸入即可。