Vue

2021.10.26

區網連線下,用手機觀看 Nuxt.js 開發的專案


網站如果要測手機版,我通常是直接用手機連自己的電腦 IP,用實際的載具去測試才準確。

如果是用 Nuxt.js 開發的專案,需要加一些設定才可以用手機連電腦 IP 喔!這邊從頭開始一步一步跟大家分享:

修改 host 設定

Nuxt.js 的專案預設為 localhost,所以我們要先修改他的 host 設定。

開啟 package.json,輸入以下資訊:

"config": {
  "nuxt": {
    "host": "0.0.0.0"
  }
}

重跑一次專案

接著 ctrl + c 停止編譯專案,再 npm run dev 一次,可以看到 Terminal 的 Nuxt Listening 位置變成了你的電腦 IP:

接著用手機輸入 Listening 的這一串網址(需包含 port),就可以用手機測試行動版囉!

注意:

1. 電腦跟手機必須連同一個 wifi
2. 電腦必須要為開機狀態,而且該專案必須在執行環境下

歡迎給我點鼓勵,讓我知道你來過 :)

guest
0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.