Vue-Cli2 區域網路共享

發表於 2020-01-16 分類於 Vue

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

我們時常在開發的時候可能會需要與他人共享網頁畫面，但是在 Vue Cli 2 就需要特別設置一下，否則你無法透過區域網路共享給他人你的網頁。

前言

我們時常在開發的時候可能會需要與他人共享網頁畫面，但是在 Vue Cli 2 就需要特別設置一下，否則你無法透過區域網路共享給他人你的網頁。

host 設置

調整方式很簡單，打開 confing/index.js，然後找到下面這一串

module.exports = {
  dev: {
  // Various Dev Server settings
  host: 'localhost', // can be overwritten by process.env.HOST
  port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  autoOpenBrowser: false,
  errorOverlay: true,
  notifyOnErrors: true,
  poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
}

這邊只需要改一個地方，也就是 host

1	host: '0.0.0.0'

這樣就可以區域網路共享你的 VueCli 2 啦~

我個人不建議修改為 192.xxx.xx.x 之類的 IP，因為這樣子會導致 localhost:8080 無法訪問，所以修改為 0.0.0.0 就好，至少 localhost:8080 可以正常運作，也可以分享給他人。

補充說明

如果還是不行的話，可以試著看看以下方式排除

防火牆、路由等等有允許通過。
要連線進來的使用者是否與開發者同一個網域，例如：接同一個 wifi。
給錯 IP，請給 IPv4，例如我的就是 10.0.1.12，如果你真的不會看，那就請打開命令視窗輸入 ipconfig，裡面就可以看到 IPv4 的 IP 囉。