Vue3+Nuxt3打造SSR網站應用，0到1實現服務端渲染

下栽

ke呈：

lexuecode.com/4477.html

nuxt3，正如官網所描述，使用Vue 3構建您的下一個應用程式，體驗混合渲染、強大的資料獲取和新功能。Nuxt 3是一個開源框架，使web開發變得簡單而強大。GitHub地址

Nuxt 3 已重新架構，核心更小，並針對更快的效能和更好的開發人員體驗進行了最佳化。

新特性如下：

相當於75倍小的伺服器部署，和更小的客戶端包；

基於Nitro的動態程式碼分離和冷啟動；

在任一元件中，渲染前和渲染後過程中，都可以獲取資料；

使用Composition API和Nuxt 3的可組合元件來實現真正的程式碼重用；

零依賴的腳手架，便於模組整合；

在瀏覽器中，能夠快速處理資訊以及快速修復；

更快的構建時間，更小的包的體積，並且不需要額外配置；

快如閃電般的HMR，當你用了Vite；

Vue3是你下一個應用程式的重要基石；

使用原生的TypeScript和ESM構建，也不需要額外的步驟。

Nuxt Bridge

Nuxt經過了4年的開發，遷移到Vue3中，這將對未來形成一個堅實的基礎。

為了讓Nuxt2平滑升級到Nuxt3中：

遺留的外掛和modules將會繼續工作

nux2的config將是可相容的

部分頁面的Api是可用的

為了讓Nuxt2也擁有Nuxt3的一些新功能，我們移植了一部分過去，比如：

在Nuxt2中使用Nitro伺服器

在 Nuxt 2 中使用 Composition API（與 Nuxt 3 相同）

在 Nuxt 2 中使用新的 CLI 和 Devtools

vue服務端渲染（SSR）初探

服務端渲染的優劣

首先是seo問題，前端動態渲染的內容是不能被抓取到的，而使用服務端渲染就可以解決這個問題。還有就是首屏載入過慢這種問題，比如在SPA中，開啟首頁需要初始載入很多資源，這時考慮在首屏使用服務端渲染，也是一種折中的最佳化方案。但是使用SSR時，勢必會增加伺服器的壓力，還有可能會需要前後端同構，使用同樣的模板引擎，這似乎與前後端分離的觀點又是矛盾的。廢話就說到這裡，下面來看一下vue框架中的伺服器渲染。

vue-server-renderer

vue-server-renderer就是vue中處理服務端載入的一個模組了，官方文件：https：//ssr。vuejs。org/en/，暫時沒有中文版的，我也只是稍微看了一些，然後寫了一個簡單的demo。首先新建一個test。js檔案，並用npm安裝依賴express、vue、vue-server-renderer。引入vue-server-renderer之後，然後新建一個temp。html作為渲染的基本模板，用createRenderer方法新建一個render例項，這裡我傳入temp。html作為renderer的template的引數，在後面渲染時就會以這個temp。html作為基礎模板。

const renderer = require（‘vue-server-renderer’）。createRenderer（{

template： require（‘fs’）。readFileSync（‘。/temp。html’， ‘utf-8’）

}）

temp。html：

<！DOCTYPE html>

<！——vue-ssr-outlet——>

接下來隨便定義一些渲染用的資料，然後用express新建一個node伺服器，再定義一個vue的例項。然後再呼叫renderer的renderToString方法來渲染生成html，渲染成功後返回給客戶端。

const Vue = require（‘vue’）

const server = require（‘express’）（）

const context = {

title： ‘hello’

}

const mocktitle = ‘我愛吃的水果’

const mockdata = ［‘香蕉’， ‘蘋果’， ‘橘子’］

server。get（‘*’， （req， res） => {

const app = new Vue（{

data： {

url： req。url，

data： mockdata，

title： mocktitle

}，

template： `

}）

renderer。renderToString（app， context， （err， html） => {

if （err） {

res。status（500）。end（‘Internal Server Error’）

return

}

res。end（html）

}）

}）

server。listen（8080）

注意這裡渲染的資料有兩種，mockdata是作為vue例項的data來渲染在例項模板中的，而context是作為基礎模板的data來渲染temp。html的。可以看到在服務端用vue進行渲染的規則和前端渲染時一樣，v-for、v-if等都可以正常使用。最後命令列輸入node test。js，然後在瀏覽器開啟http：//localhost：8080 檢視結果如下：

示例。png

可以看到服務端直接返回了一個渲染完成的Doc，示例demo到此結束。

Vue3專案實現國際化全套方案

Vue 進入 3。0 時代後，開發體驗進入了極速。無論是基建工具（ vite、vitest、vitessr 、vueuse），還是其生態下的各種外掛（vue-i18n 、vite-ssg、vite-plugin-pages、vite-plugin-vue-layouts、unplugin-auto-import、unplugin-vue-components） ，以及其他如unocss、windicss、tailwindcss、typescript等包的支援都帶來了極佳的開發體驗。

工具

pnpm：包管理工具（推薦）

vite： 打包工具

vue-i18n： 國際化包

unplugin-auto-import： 自動引入外掛

@intlify/vite-plugin-vue-i18n： vite外掛

i18n Ally： VS Code外掛

整合

以下內容是基於 vite+TypeScript 專案搭建完成、unplugin-auto-import 整合工作完成的基礎上

安裝

包

npm i vue-i18n

npm i -D @intlify/vite-plugin-vue-i18n

複製程式碼

VS Code 外掛

外掛庫直接搜尋 i18n Ally 關鍵字安裝

引入

配置 vite。config。ts

// vite。config。ts

import VueI18n from ‘@intlify/vite-plugin-vue-i18n’

export default defineConfig（{

plugins： ［

。。。

AutoImport（{

imports： ［

‘vue’，

‘vue-router’，

‘vue-i18n’， // 新增

‘@vueuse/head’，

‘@vueuse/core’，

］，

dts： ‘src/typings/auto-imports。d。ts’，

}），

// 新增

VueI18n（{

runtimeOnly： true，

compositionOnly： true，

include： ［resolve（__dirname， ‘locales/**’）］，

}），

］

}）

複製程式碼

新建 locales 目錄，存放語言配置檔案

此時， i18n Ally 外掛會檢測專案根目錄下的 locales 資料夾

對於新整合 vue-i18n 的專案，i18n Ally 外掛需要重啟一下才能識別到根目錄下的 locales 資料夾

新建 src/modules/i18n。ts 檔案，自動引入 locales 目錄下的語言配置

// src/modules/i18n。ts

import { createI18n } from ‘vue-i18n’

import type { UserModule } from ‘~/types’

// Import i18n resources

// https：//vitejs。dev/guide/features。html#glob-import

//

// Don‘t need this？ Try vitesse-lite： https：//github。com/antfu/vitesse-lite

const messages = Object。fromEntries（

Object。entries（

import。meta。globEager（’。。/。。/locales/*。y（a）？ml‘））

。map（（［key， value］） => {

const yaml = key。endsWith（’。yaml‘）

return ［key。slice（14， yaml ？ -5 ： -4）， value。default］

}），

）

export const install： UserModule = （{ app }） => {

const i18n = createI18n（{

legacy： false，

locale： ’en‘，

messages，

}）

app。use（i18n）

}

複製程式碼

應用

最終效果

可以在開發過程中，直觀的看到內容

VS Code 右下角，可以切換當前支援的語言，對應 locales 目錄下的檔名