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

本文將介紹如何使用Nuxtjs對vue項目進行ssr和靜態化處理。 Nuxtjs簡單介紹首先，我們簡單瞭解下Nuxtjs框架，Nuxt.js是一個基於Vue的通用框架，主要用於解決Vue項目的服務端渲染(SSR)。它本質上是一個Vue框架，增加一層node服務，通過對客戶端/服務端的抽象封裝，使 ...

本文將介紹如何使用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 模塊進行處理：

安裝該模塊：npm install @nuxtjs/router。
在配置文件中增加：modules: ['@nuxtjs/router']。
在項目根目錄下增加路由文件 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 佈局頁面中進行頁面處理才解決問題，具體如下：

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

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

<div class="layouts">
  <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文件夾目錄，部署到伺服器上即可。