基於vue的服務端渲染框架Nuxt介紹與實踐

時間 2019-11-10

標籤基於 vue 服務渲染框架 nuxt 介紹實踐简体版

原文原文鏈接

Nuxt是什麼

Nuxt.js 是一個基於 Vue.js 的通用應用框架，經過對客戶端/服務端基礎架構的抽象組織。
2016年10月發佈，運行環境基於vue+webpack+babel,
預置了使用vue開發服務端渲染應用所需的基礎配置,
而且集成了vue-router、vuex、vue-meta等vue生太圈經常使用的組件和框架，
使用webpack、vue-loader、babel-loader來處理自動化構建工做。css

Nuxt用來作什麼

vue框架因爲是單頁面SPA應用，故存在SEO、首屏渲染、路由切換時渲染慢，用戶體驗略差等問題。
因此基於vue的服務端渲染方案應運而生。vue

框架特性

基於vue.js，學習成本低
內置代碼分層
服務端渲染
本地開發熱更新
SEO及mete頭標籤管理
nuxt官網node

開發過程及配置

1.安裝
配置好node環境和npm之後，經過vue init nuxt/express **腳手架工具生成默認文件。
npm i && npm run dev後打開localhost:3000可看到官方提供的示例。
2 目錄介紹
目前所用爲1.4版本，所生成的目錄以下：jquery

pages:頁面組件，Nuxt會根據結構生成對應的路由
componets:公共組件
layouts:宿主頁面模板組件，可讓不一樣的頁面使用不一樣的佈局
assets: 用於webpack打包的靜態資源
middleware:中間件，首屏加載和路由跳轉前均會執行對應中間件，能夠全局配置，也能夠部分組件配置
plugins:插件，SPA中經常使用的三方組件(如axios、utils)，或者引入本身編寫的三方庫
store:內置了vuex，在store目錄下增長index.js，返回一個Vue.Store實例便可

3 配置
nuxt.config示例
nuxt以約束文件和nuxt.config.js的方式管理程序和組件之間的關係
nuxt.config.js對應用的擴展主要以下:webpack

build:webpack配置，能夠對默認的webpack配置進行擴展
cahe:配置組件緩存
css:全局css樣式
dev or env:自定義環境變量,對應webpack.config.js中的變量
head:vue-mete配置，在nuxt.config.js中會應用於全局，在組件中調用則只會應用於組件
loading:nuxt內置的進度條組件，可自定義或引用三方組件
performance: nodejs服務器性能配置
plugins: 劃重點，常常用，而且很重要。
plugins會在Nuxt.js 應用實例生成以前加載，如 axios、filter。
支持數組或者對象，ssr屬性默認爲ture。
可是有部分組件依賴window或者docuemnt對象，須設置爲false，即不打包到服務端
腳本中，例如loadsh，依賴window對象，需以下配置ios
```
plugins: [
         {src: '~plugins/lodash.js', ssr: false}
     ],
```

經常使用API

1.asyncData
頁面組件加載前調用，可獲取當前上下文對象，異步請求的數據會返回給當前組件的data。
注意:此時vue實例還未生成，拿不到this。git

2.middleware
中間件，每次路由切換時調用，例如作登陸判斷github

export default function ({ store, redirect }) {
          // If the user is not authenticated
          if (!store.state.authenticated) {
            return redirect('/login')
          }
        }

3.head
修改title和Meta標籤
4.vendor
nuxt.config.js的vendor屬性，可避免重複打包web

開發中常見問題

1.資源引用
全局資源文件在nuxt.config.js中配置ajax

module.exports = {
  head: {
    script: [
      { src: '                https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?            family=Roboto' }
    ]
  }
}

局部配置
  
  ```
  <script>
    export default {
      head: {
      script: [
      {       src:'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto'             }
    ]
        }
    }
  </script>
  ```

2.webpack配置擴展

module.exports = {
  build: {
     extend (config, { isDev, isClient }) {
       // ...
     }
  }
}

3.window/Document未定義
只兼容客戶端的組件被打包進了服務端腳本中，單獨抽出後，放後plugins中，配置時設置ssr爲false。組件內引用時，經過process.BROWSER_BUILD判斷導入

if (process.BROWSER_BUILD) {
      require('external_library')
    }

4.UI組件選擇
目前支持服務端渲染的UI組件不是不少，已嘗試過的有PC端element-ui，移動端vux，
詳細配置見vux-plugins
和同目錄下的vux-components.js

使用element-ui

vender:[
   'element-ui'
 ],
 babel:{
   "plugins": [["component", [
 {
   "libraryName": "element-ui",
   "styleLibraryName": "theme-default"
 },
 'transform-async-to-generator',
 'transform-runtime'
   ]]],
      comments: true
 },
 plugins: [
 { src: '~plugins/element-ui', ssr: true }
 ],
 css: [
 ]
  
~plugins/element-ui.js

      import Vue from 'vue'
      import { Button } from 'element-ui'
      Vue.component(Button.name, Button)

5.rem引入
將rem.js放入pluins中，在nuxt.config中配置ssr爲false便可

6.部署
pm2提供了比較好的一套方案。默認服務器有node pm2 git 環境
進入項目目錄後執行pm2 deploy production

ecosystem.config.js配置以下

deploy: {
       production: {
           user: '倉庫用戶名',
           host: '倉庫地址',
           ref: 'origin/master 分支名稱',
           repo: 'https://***.git 項目git地址',
           path: '/var/www/production 打包後代碼目錄',
           'post-setup': 'git pull origin develop && ls -la',
           'post-deploy': 'npm install && npm run build && pm2 reload    
            ecosystem.config.js --env production'
           },
       }

項目代碼代碼地址，有疑問能夠提issue。