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

jimojianghu發表於2023-04-13
UXJS服務端

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

Nuxtjs簡單介紹

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

image

使用Nuxtjs

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

建立一個新的Nuxtjs專案：

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

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

image

標註了基本結構，不一定所有結構都會用到，根據專案的不同情況進行使用。
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 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資料夾目錄，部署到伺服器上即可。

相關文章