六月 25, 2018 | 前端與Vue

用Nuxt的SPA Mode一次搞定網頁切版~輕鬆又寫意

開開心心的弄好Nuxt的專案想跟朋友分享成果卻不知道該如何是好嗎?別擔心!HelloSanta告訴你怎麼快速方便使用Nuxt的SPA Mode!

在提到Nuxt的SPA Mode之前 先來談談什麼是SPA吧!

SPA是Single Page Applications的縮寫,以我們的口語來說就是指單頁式網站。 它是一種網站的架構,透過JavaScript來動態更換網頁上的內容,讓使用者不需要經過換頁的動作就能瀏覽整個網站。

這麼做有什麼好處呢?

所有網頁上需要的資源不需要重新載入 畫面有更動的話只要傳輸更動的部份就好 因為少了讀取跟刷新的動作,使用者體驗會大幅提昇

缺點呢?

缺點就是網站會變成一大堆看不懂的JavaScript,進而導致SEO下降 這對於網站來說是個頗為嚴重的致命傷

典型的SPA網站範例(大概就是深不見底的一直往下滾吧)

那...SPA跟Nuxt有什麼關聯呢?

以往的SPA在SEO上的表現都不怎麼好,但是由Nuxt輸出的SPA除了把動態的JavaScript轉成靜態以外,它還會把程式碼全部放到meta裡頭讓網站能夠順利的讀取,在利用webpack把html全部壓縮成一行加快網站的讀取速度!

說了這麼多,該怎麼使用呢?

平常我們使用的npm run devnuxt都只是運行SSR(Server-Side Rendering),而Nuxt也有提供SPA的功能!

使用設定上也非常方便! 只要在nuxt.config.js裡面 找到module.exports ={ }接著在大括弧裡頭加上 mode: 'spa',之後在使用npm run dev --spa 或是 nuxt --spa就能運行SPA模式囉!

可以用了,接下來呢?

當網站完成之後,總是會希望他能出現在網路上給廣大的好友們觀看炫耀一番,上傳到github是不錯的選擇!但是該怎麼做呢?

首先,我們要先npm run generate把做好的東西變成乾淨簡單的檔案! 這個指令會把我們的nuxt專案壓縮到dist資料夾裡面

對於使用mac的朋友,我們可以先安裝一個套件npm install push-dir --save-dev這個套件可以幫助我們把dist資料夾裡面的檔案推上github

安裝好後找到package.json,這個檔案通常會再最外層,還蠻好找的!

在script裡頭加上

"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"

這段的意思是,使用npm run deploy這個指令把dist資料夾的東西push到名字叫gh-pages的branch上面