目標：用 vite2 + vue3 + Ts 搭建一個開箱即用的最簡 ssr 通用項目,? 包含必要的 vuex vue-router?asyncData header管理。

一?通過官方腳手架搭建一個 vue-ts 的 SPA 項目

首先安裝 yarn 包管理工具：?

創(chuàng)建一個簡單的 vue-ts 項目：?

瀏覽器打開?http://localhost:3000/ 一個最簡單的 vue3 + typescript?的 SPA 單頁應用就搭建好了。

二 對 SPA 單頁應用，進行 ssr 渲染改造。

在 src 目錄下添加兩個入口文件?

項目目錄下 修改 index.html文件

新建node端web服務器入口文件（開發(fā)環(huán)境）： server-env.js?，官方推薦 express，安裝node包： yarn add -D express

package.json文件 新增dev命令

終端運行 yarn dev, 瀏覽器打開：http://localhost:3000/? 網(wǎng)頁右鍵“顯示頁面源碼”、

生產(chǎn)環(huán)境打包，package.json新增 build 相關(guān)命令

新建 node 端web服務器入口文件（生產(chǎn)環(huán)境）：?server.js?，個人選擇 koa搭建生產(chǎn)環(huán)境服務器，安裝 node 包：yarn add -D koa koa-static

終端運行： yarn preview，瀏覽器打開：http://localhost:3000。最簡 ssr 改造完成。

三 安裝生產(chǎn)上必備的 vue 全家桶： scss vuex vue-router

首先安裝scss支持： yarn add -D sass.??

安裝vue-router 和 vuex :? yarn add vuex@next vue-router@next? vuex-router-sync@next

新建 src/store/index.ts 和 src/router/index.ts 兩個文件

新建對應的 src/views/頁面 Home.vue? About.vue? 404.vue, 略。

修改 entry-client.ts 和 entry-server.js文件，加入相應的 vuex 和 router

終端運行： yarn dev 查看開發(fā)環(huán)境效果。終端運行： yarn preview?查看生產(chǎn)環(huán)境效果。

第一階段源碼：?https://github.com/damowangzhu/vite2-vue3-ssr_steps/tree/v1

四 服務端預取數(shù)據(jù) asyncData

服務端預取數(shù)據(jù)采用 vue2的 asyncData 方式。

新建?vue-extend.d.ts 文件

在Home.vue 添加 asyncData，store里用 setTimeout 模擬異步請求。

修改entry-client.ts中路由守衛(wèi)，?router.beforeResolve( ) 相關(guān)。

修改entry-server.js中 render 函數(shù)。

終端運行 yarn dev查看效果, 服務端預取數(shù)據(jù)渲染正確，但devtools 有一個報錯：Hydration completed but contains mismatches.? 是客戶端和服務端的 store 未同步

同步方式如下：

index.html 文件添加相應的?window.__INITIAL_STATE__? 標識

修改entry-server.js 的 render函數(shù) 返回 state

在 server-env.js? 和 server.js 修改 html模版 注意 `' '`。

?entry-client.ts 文件末添加??store.replaceState（）函數(shù)同步state。

在shims-vue.d.ts 添加? typescript支持?

終端運行 yarn dev 和 yarn preview 查看效果。

這一階段源碼： https://github.com/damowangzhu/vite2-vue3-ssr_steps/tree/v2

五 Head管理，ssr for SEO

以 title 為例，description 和 keywords 雷同。

在 src/router/indext.ts 寫入 meta 信息?

在index.html文件添加 title 標記

在server.js 和 server-env.js 修改模版

在entry-client.ts 文件做個前端路由跳轉(zhuǎn)兼容?

六 增加配置文件，開發(fā)環(huán)境和生產(chǎn)環(huán)境

項目目錄下新建 .env.development 和 .env.production 文件

修改 vite.config.ts 文件, 配置文件通過 loadEnv?獲取.env files 環(huán)境變量,?

如果靜態(tài)資源要發(fā)布CDN，可設置 例如：?VITE_ASSET_URL=https://cdn.domain.com/

程序內(nèi)部通過?

七 代碼格式化和 typescript 類型檢查

官方推薦 Vscode + Volar, 通過 ide 的插件做類型檢查等

Vscode安裝?volar 和 Prettier 插件, 新建 .prettierrc.js 文件 , Vscode默認格式化選擇 prettier

修改 ts.config.json?增加兩條驗證規(guī)則。

終端運行 yarn dev 和 yarn preview 查看效果。

若生產(chǎn)環(huán)境編譯需要Ts類型檢查 可通過 vue-tsc 插件，但編譯會慢很多，修改package.json 配置文件。

最后 升級vue3 到最新版本： yarn add vue@next;

本文源碼：??https://github.com/damowangzhu/vite2-vue3-ssr_steps

參考資料：?

https://vitejs.dev/guide/ssr.html??

https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue

https://github.com/vok123/vue3-ts-vite-ssr-starter

感謝互聯(lián)網(wǎng)具名和不具名的大佬們～