Nuxtjs實作服務端渲染和靜態化站點

本文將介紹如何使用Nuxtjs對vue專案進行ssr和靜態化處理，

Nuxtjs簡單介紹

首先，我們簡單了解下Nuxtjs框架，Nuxt.js是一個基于Vue的通用框架，主要用于解決Vue專案的服務端渲染(SSR)，
它本質上是一個Vue框架，增加一層node服務，通過對客戶端/服務端的抽象封裝，使用Nuxt各種資源配置，處理服務端渲染，
除了服務端渲染以外，Nuxtjs還提供生成靜態化站點的能力，

使用Nuxtjs

當我們需要進行SSR服務端渲染處理，使用Nuxtjs的時候，為了避免各種庫的版本兼容等問題，建議使用官方提供的 create-nuxt-app 新建一個標準的nuxtjs專案，然后再將原有Vue專案代碼遷移過來，

創建一個新的Nuxtjs專案：

npx create-nuxt-app <專案名>
# 或
yarn create nuxt-app <專案名>

創建好新的Nuxtjs專案后，補充專案目錄結構，大致如下：

標注了基本結構，不一定所有結構都會用到，根據專案的不同情況進行使用，
Nuxtjs專案創建完成，建立好相應的目錄結構以后，就可以把對應Vue專案里的代碼遷移到Nuxtjs專案中，
大部分的頁面和組件都比較好遷移，直接復制拷貝就可以，但如果涉及到路由和狀態管理，需要特別處理，在介紹之前先看下Nuxtjs的組態檔，

Nuxt配置

先看下nuxt.config.js檔案的基本結構，如下代碼：

export default {
  target: '',
  srcDir: '',
  head: {
    title: '',
    htmlAttrs: { lang: 'en' },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  css: [],
  plugins: [],
  components: true,
  buildModules: [],
  modules: [],
  build: {}
}

各個配置項對應不同的功能：

• target
  部署目標，server(服務端渲染)和 static(靜態化站點)
• srcDir
  配置專案的原始碼路徑，如代碼檔案方在 src 下，這里就配置 ./src
• head
  配置頁面head部分內容，該配置還能統一增加通用JS腳本如第三方統計sdk等
  也可以在pages目錄下的vue檔案中自行定義每一頁的head內容
• css
  定義全域樣式檔案或第三方庫樣式等，如添加通用樣式：assets/style/reset.less
• plugins
  第三方js庫或自定義全域插件等
• modules
  添加Nuxtjs模塊到專案中，如添加 @nuxtjs/axios、@nuxtjs/router等
• build
  在build的bundle.js中添加模塊，減少應用bundle的體積

路由和狀態管理

關于路由，正常情況下，Nuxtjs會依據頁面目錄(pages)結構自動生成路由配置，
但如果需要在專案中自定義添加較復雜的路由，可以使用 @nuxtjs/router 模塊進行處理：

1. 安裝該模塊：npm install @nuxtjs/router，
2. 在組態檔中增加：modules: ['@nuxtjs/router']，
3. 在專案根目錄下增加路由檔案 router.js，用于處理路由，

關于狀態管理，可以直接在根目錄結構下使用store目錄，Nuxtjs會自動找到store目錄，并參考 Vuex 模塊，構建整個專案的狀態管理，
這個程序和單獨的Vue專案大致一樣，只不過不用在代碼里引入store檔案，其他使用方式也一樣：

import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('config')
export default {
  computed: {
  ...mapGetters([
    'isHad'
  ])
  },
  methods: {
  ...mapMutations([
    'setConfig',
    'initConfig'
  ])
  }
}

也可以使用 $store 進行操作：

this.$store.dispatch('config/setConfig', {})

命令腳本

接下來，看下package.json的命令腳本，Nuxtjs常用的scripts命令陳述句：

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

其中，npm run build 用于服務端渲染；npm run generate 用于靜態化站點，
基于此，在這里解釋下這些陳述句，簡單看看每些陳述句執行后，做了什么：

• npm run dev 單獨執行，會生成根目錄下的 .nuxt 目錄，但該目錄下不包括 dist 目錄
• npm run build 也會生成根目錄下的 .nuxt 目錄，該目錄包含 dist、dist\client、dist\server
• npm run generate
  • 如果設定組態檔 target: 'static', 則只會生成根目錄下的 dist 目錄，包含所有靜態資源
  • 如果組態檔沒設定 target, 則除了會生成根目錄下的 .nuxt 目錄(包含 dist、dist\client、dist\server)，還生成根目錄下的dist 目錄(包含靜態資源)
• npm run start 需要搭配 build、 generate 命令一起使用：
  • 先執行 build 再執行 start，則使用 .nuxt 目錄的內容，target被設定成server
  • 先執行 generate 再執行 start，則使用 dist 目錄的內容
  • 如果 nuxt.config.js 配置中的 target: 'static'，則 start 必須和 generate 一起使用

process

Nuxtjs存在兩個環境，一個用于運行服務端，一個用于運行客戶端，通過環境變數可以進行區分，
下面，看下Nuxtjs中的 process 幾個環境變數：

• process.server：用來標識當前環境是服務端Vue
• process.client：用來標識當前環境是客戶端Vue
• process.static：用來區分是否是 npm run generate 生成，為true則是，為false則否

如果 nuxt.config.js 中的 target: 'static'，則 npm run dev、npm run build、npm run generate 中的 process.static 都是 true，

process.client/process.server 是在執行打包命令的時候進行轉換的，這個時候會把服務端和客戶端的代碼分開打包，服務端的代碼在node環境中執行，客戶端的代碼一般在瀏覽器中執行，

它們的存在，對我們處理一些問題很有用，如只能在客戶端環境下執行的代碼要做區分(window、document等)：

if (process.client) {
  document.addEventListener('click', (e) => {})
  window.addEventListener('resize', () => {}, false)
}

如上代碼，當使用了 process.client 進行判斷后，這部分代碼將只會打包在客戶端，就不會出現找不到物件的錯誤了，

Nuxtjs部署

有了以上關于Nuxtjs的介紹，特別是腳本命令，我們就能很容易搞定Nuxtjs的部署了，
Nuxtjs在部署上有三種方式：服務端渲染部署、靜態化站點部署、單頁面應用部署，

服務端渲染部署

設定nuxt.config.js：

target: 'server'

執行打包命令：

npm run build

執行命令后，將會在根目錄下生成一個 .nuxt 的目錄，

當我們要在服務器上進行部署的時候，需要將Nuxtjs專案下的 .nuxt目錄、static目錄、nuxt.config.js、package.json 四個資源拷貝到服務器上，
在服務器上直接啟動，則執行以下命令：

# 安裝包：
npm run install

# 啟動：
npm run start

PM2 啟動

如果用PM2來啟動，也是先安裝包：npm run install，
然后，可以新建一個PM2的啟動組態檔 ecosystem.json：

{
  "app": [{
    "name": "appWeb",
    "script": "./node_modules/nuxt/bin/nuxt.js"
  }]
}

配置好 script 啟動腳本，直接啟動即可：

pm2 start ecosystem.json

靜態化站點部署

設定nuxt.config.js：

target: 'static'

執行打包命令：

npm run generate

生成的靜態檔案位于根目錄的 dist 目錄（默認）下，直接將該檔案拷貝web服務器上即可，

靜態頁面JS無效

生成靜態檔案時，會把pages下的每個頁面都生成一個對應的html頁面，但如果遇到該html頁面上的js無效的情況，需要特殊處理，
我在處理nuxtjs專案，進行靜態化匯出的時候就碰到了JS無法執行的問題，最后使用在 layouts 布局頁面中進行頁面處理才解決問題，具體如下：

1. 在 layouts 布局頁面獲取路由path值：toPath: this.$route.path;
2. 在布局頁面中增加對應的頁面模塊：

import page1 from '../pages/page1'
import page2 from '../pages/page2'

<div >
  <pp-header/>
  <page1 v-if="toPath.includes('page1')"/>
  <page1 v-if="toPath.includes('page1')"/>
  <pp-footer/>
</div>

通過路由字串判斷，獲取當前路由資訊，使用組件的方式加載對應的頁面，
這樣處理后，在使用 npm run generate 進行靜態化打包時，也會把對應頁面的內容替換進去，
最后生成html頁面，瀏覽器打開后JS都能執行，

而直接使用 <nuxt/> 雖然頁面內容效果一樣，但JS卻無法執行，

單頁面應用部署

設定nuxt.config.js：

mode: 'spa'

執行打包命令：

npm run build

這時候會自動生成dist檔案夾目錄，部署到服務器上即可，

標籤：其他

上一篇：漲姿勢了，有意思的氣泡 Loading 效果

下一篇：面試題：JS如何最快的執行垃圾回識訓制