此文為ssr三步曲的第三部，前文在這
這篇文章的**有2個分支：tag-v3-pre、tag-v3
之前寫過一篇文章，koa+mongodb搭建後端，裡面寫的更詳細一些，有興趣的可以翻出來看看，只不過文末一部分一直擱置未完篇，因為一行行寫起來比較繁瑣，後面又比較忙。（說白了，是懶，哈哈）
此處我們簡單一點，用koa+koa-router搞乙個後端路由出來即可，話不多說，那就開始吧。。
npm i koa @koa/router koa-bodyparser koa-static art-template koa-art-template log4js chalk不過事情剛開始嘛，我們的需求是很簡單的，殺雞焉用牛刀，所以選擇art
@koa/router，是koa團隊接手了koa-router之後維護的類庫，koa-router停留在了7.x，而@koa/router也是直接從8.x開始
log4js: 日誌是少不了的，所以log4js來乙個吧
chalk: 讓控制台輸出更漂亮
再安裝一下types
npm i -d @types/koa @types/koa__router @types/koa-bodyparser @types/chalk接下來就不貼具體的**了，只闡述一下思路，**在github上有按分支存檔，文中會對應說明如果是普通nodejs，我們可以用nodemon+ts-node來除錯：
npm i ts-node
// nodemon很多地方用的上，所以直接全域性安裝吧
最簡單的乙個例子就是koa路由裡，使用rendertostring，來渲染乙個jsx，返回渲染後的string給前端。
但如果直接執行的話，是會報錯的，因為有以下幾個問題需要解決：
nodejs不支援import/export語法
兩個方案：使用babel轉，速度會拖慢
node9開始多了乙個特性：--experimental-modules，node執行的時候啟用這個選項，並且檔名需要為.mjs字尾
nodejs不支援tsx語法
元件內部匯入scss之類的檔案在node端會報錯
打包出來的js, css如何注入
服務端資料如何注入到客戶端
node是沒辦法對tsx, scss之類的做處理的，所以，webpack登場了，除了前端**，後端**同樣需要用webpack來進行打包，主要有以下幾點區別：
webpack：
webpack的target需要設定成node
css、scss使用ignore-loader忽略掉
使用loadable來拆分檔案、做服務端渲染
loadable真是神器，沒有這個的話，就只能用manifest loader來生成資源清單，並且沒有拆分功能
服務端資料注入到客戶端比較簡單了，直接往window物件插入乙個物件，比如ssrdata = {}，然後前端初始化store的時候合併一下initstate即可
總的來說，我們需要跑3個命令：
編譯客戶端並watch
編譯服務端並watch，服務端對client端生成的檔案做靜態資源處理
用nodemon之類的工具，watch服務端生成的檔案，有變更時自動重啟
到這裡，其實生產環境的ssr已經完成了，因為ssr我們就是對客戶端、服務端分別進行打包，然後node執行服務端的**啟動服務。
這個版本的**詳見：
上乙個版本在生產環境沒問題，開發環境簡直不能忍啊。因為css更新不會自動重新整理、js更新不會自動重新整理，幹啥都需要手動重新整理一下瀏覽器。。
所以我們想辦法改良一下，用乙個指令碼解決，這個命令幹了這兩個事情：
webpack編譯客戶端，並手動啟乙個webpackdevserver
webpack編譯服務端，並監聽hooks.done，在done之後啟乙個node，啟動服務
啟動新程序可以用child_process.spawn或者cluster，此處我們使用child_process即可。cluster是基於child_process.fork啟動若干子程序，再有乙個agent來調配，通過ipc通訊，功能更強大，但貌似官方其實不是很推薦，我看到生產中更多人選擇的是pm2等工具。
就算css變更也同樣會觸發hooks.done，所以我們改進一下，nodemon只監聽後端生成的js，有變更才殺掉舊的子程序，啟動乙個新的子程序
這個版本同樣進行了一些其他的優化，比如把配置檔案提取到乙個create-config.js中，客戶端服務端都呼叫該函式生成config。同時命令簡化成2條，dev和build分別用來啟動本地除錯和打包生產**。
這個版本的**詳見：
整個過程其實也踩了不少坑，webpack的配置還是挺多的，不過只要你耐心根據需要把官網文件翻一遍，基本上也沒啥問題。
上次看到有人開玩笑說現在多了乙個工種：webpack配置工程師..vue生態的vite最近更新特別頻繁，等穩定下來可以嘗試一下，這些工具都是一代比一代簡化，希望以後在配置方面能更簡化、節省精力吧。。
理解vue ssr原理，自己搭建簡單的ssr框架
大多數vue專案要支援ssr應該是為了seo考慮，畢竟對於web應用來說，搜尋引擎是乙個很大的流量入口。vue ssr現在已經比較成熟了，但是如果是把乙個spa應用改造成ssr應用，成本還是有些高的，這工作量無異於重構前端。另外對前端的技術要求也是挺高的，需要對vue比較熟悉，還要有node.js ...
Mac 搭建乙個ssr伺服器
1 首先需要購買乙個國外的伺服器 我這裡購買的是 按使用時間收費還可以 2 註冊vultr 賬號 官方活動通過邀請鏈結點選進去註冊 充值10 後會贈送 25 12月有效 2 然後購買伺服器 最少充值10美元 可以選擇支付寶支付 3 接著選擇伺服器 4 至少購買5美元乙個月的 不然不支援ipv4的 不...
nodeJS 後端專案搭建流程
安裝 nodejs 和 npm 選裝cnpm npm install g cnpm registry 安裝好之後可以使用cnpm代替npm 全域性安裝express generator cnpm install express generator g 安裝好之後可以使用express命令建立腳手架工...