Vue-Cli2 區域網路共享

前言

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

host 設置

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

1
2
3
4
5
6
7
8
9
10
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 囉。
0%