Vue-Cli2 區域網路共享

前言

我們時常在開發的時候可能會需要與他人共享網頁畫面，但是在 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

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 囉。