前端學習筆記 - nuxt.js

最近工作中有用到服務端渲染，一邊學一邊寫了一個小demo，這裡記錄下過程：

服務端渲染的好處就不多說了，網上有很多，直接開始吧！

• 使用 create-nuxt-app

  官網

  按照官網的教程第一步：

  yarn create nuxt-app <專案名>

  我的專案名也叫 nuxt-app所以我輸入的命令是：

  yarn create nuxt-app nuxt-app

• 選擇專案配置

  輸入完上面的命令後會有一些選項：

  

  需要注意的是 choose rendering mode 這一項，它有 Universal 和 SPA這兩種選項，如果選了 SPA 那麼構建完成之後，生成包含常見的meta和資源連結，但不包含頁面內容。

  這裡坑了我好久，別人的專案中，請求到的html都有渲染好的內容在裡面，我選了這個模式後就和用vue-cli構建的單頁面應用一樣，只有基本的結構。最後還是在文件中找到原因。

  

• 新增css前處理器

  我用scss，所以手動新增（其他的也一樣，都要手動新增）

  yarn add node-sass sass-loader -D

• 解決跨域問題

  安裝官方提供的包

  yarn add @nuxtjs/proxy

  然後在nuxt.config.js中找到axios這一項，加上 proxy: true屬性

  

  然後新增

  

  '/guiderank-web'就是要匹配的請求

  'zone.guiderank-app.com' 這一部分就是要代理去的介面域名

  這個介面是我隨便找的，也可以用其他

  在元件中這樣用

  

  asyncData 這個是 nuxt 提供的生命週期，文件上寫的很詳細

  結果：

  

  成功拿到

  不過這個介面的access-control-allow-origin是*，我又去A站上隨便找了個介面，測試了下，用這個方法是可以拿到的

  

  

• 開發頁面

  正常的應該要封裝一下axios，我這裡就不封裝了。（懶）

  開發頁面就是用vue的語法，但是需要注意的有：

  自己寫的一些庫，需要通過

  

  這種方法引入。

  全域性的樣式檔案通過這種方式引入：

  

  其他的知識點就需要去看文件了。

  最後還有個坑，我部署到gitPages中js路徑出問題，找不到檔案，目前還沒找到原因。