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

  • 日期:
  • 留言數:0
  • 標籤:

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

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

修改 host 設定

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

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

JSON
package.json

重跑一次專案

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

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

注意:

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

將 Nuxt.js 串接的資料改寫成多國語系

書接上回

上次提到如何用 Nuxt.js 串接 data 做下拉式選單,接下來會繼續沿用該資料,並將之改寫為多國語系。

安裝 i18n

先來 i18n 一下:

Shell

在 nuxt.config.js 設定 i18n 的資料:

JS
nuxt.config.js

你可能會看到另外一種寫法,是直接在 nuxt.config.js 設定語系的資料夾和檔案:

JS
nuxt.config.js

但我的語系拆的很細,一個 component 會載入一個語系,所以會將語法寫在 components 檔案中。

準備語系檔

參考上一篇 navData 的資料,將他複製起來另存為 json 檔 (格式記得改一下):

JSON
tw/nav.json

記得 en 的語系也要準備喔。

改接多國語系

打開 navBar.vue,將之前寫的 fethData 整個刪除,然後加入 i18n 的設定:

JS
navBar.vue

接下來在 computed 裡,把 i18n 的語系檔寫回 navData

JS
navBar.vue

取名為 navData 是因為之前的 data 宣告了 navData 這個物件,因此只要修改 js code 即可,不用改上方 template 的 v-for 載入的資料,他會自動對接。

原則上到這一步,就可以看到資料囉,此時接的就是多國語系 json 的檔案。

可以做個簡單的切換看看效果:

HTML
navBar.vue

以上,是我目前使用 Nuxt.js 串接多國語系的方法,如果有更好或更簡單的方法,也歡迎分享給我唷,感謝。

用 Nuxt.js 串接 data 做下拉式選單

用 Vue-cli 一陣子後,因為有 SEO 的需求,所以決定改用 Nuxt.js。

雖然 Vue-cli 也有套件 prerender-spa-plugin 可以做到預渲染的功能,但他無法預渲染動態路由,像是 /user/:id 這樣的路徑,因為預渲染是獲取已在的元素,但動態路由的元素狀態處於未知,所以無法取得對應的內容。當然,假使你的 Vue 專案都是靜態網頁,而且你也較熟悉 Vue-cli,那可以考慮用該套件即可,不需改用 Nuxt.js。


fetch 與 asyncData 的選擇

我們以往都是用 data() 存取資料,但 Nuxt.js 多了一個asyncData 的選擇,將資料放在 asyncData 底下以達到從伺服器端渲染頁面的效果,可以改寫如下:

JS
navBar.vue

頁面渲染前會執行 asyncData(),並將值塞回 data() 內,詳細內容可參考官網的 asyncData() 介紹

asyncData() 使用注意

asyncData() 雖然看似好用,卻只能在 pages/ 資料夾底下的 *.vue 才有作用,如果你的 vue 檔案是放在 components/ layouts/ 底下,是無法利用 asyncData() 存取資料的。

因此,可以改用 fetch 存取 components/layouts/ 裡的資料,改寫如下:

JS
navBar.vue

不過有看過一種說法是,asyncData() 適合用在覆蓋 data() 的資料上,fetch 則適合用在 vuex 上。所以我也不知道自己這樣寫是否有符合規範,如果有更好的方法歡迎留言給我!


製作下拉選單

這邊搭配 Bootstrap v5 來製作下拉選單,使用的是上方寫到的 navDatas[] 資料。我製作的是二層的下拉式選單 (dropdown menu),所以有比較多針對 class 的判斷式。

HTML
navBar.vue

以上。


後記

這篇不是教學,比較像是我寫 code 的筆記,因為對 Nuxt.js 不熟,很多觀念還沒有從頭看懂,所以也不敢亂教大家 XD。

後來因為有再搭配多國語系做選單,所以最後沒有使用 fetch 的方式產資料,有興趣的朋友可以參考看看:將 Nuxt.js 串接的資料改寫成多國語系