六月 25, 2018 | 前端與Vue
用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 dev
和 nuxt
都只是運行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上面