您好,登錄后才能下訂單哦!
1、前沿
1.1、什么是SSR
SSR(服務(wù)端渲染)顧名思義就是將頁(yè)面在服務(wù)端渲染完成后在客戶端直接展示。
1.2、客戶端渲染與服務(wù)端渲染的區(qū)別 傳統(tǒng)的SPA模式
即客戶端渲染的模式
SSR模式
即服務(wù)端渲染模式
用戶輸入url訪問(wèn)頁(yè)面 -> 服務(wù)端接收到請(qǐng)求 -> 將對(duì)應(yīng)請(qǐng)求的數(shù)據(jù)渲染完一個(gè)網(wǎng)頁(yè) -> 返回給用戶
1.3、為什么要使用SSR呢?
ssr的好處官網(wǎng)已經(jīng)給出,最有意思的兩個(gè)優(yōu)點(diǎn)如下:
1.4、SSR原理
這是vue.js官方的SSR原理介紹圖,從這張圖片,我們可以知道:我們需要通過(guò)Webpack打包生成兩份bundle文件:
不管你項(xiàng)目先前是什么樣子,是否是使用vue-cli生成的。都會(huì)有這個(gè)構(gòu)建改造過(guò)程。在構(gòu)建改造這里會(huì)用到 vue-server-renderer 庫(kù),這里要注意的是 vue-server-renderer 版本要與Vue版本一樣。
2、開(kāi)始構(gòu)建基于vue-cli3 的SSR應(yīng)用程序
了解ssr原理后,來(lái)開(kāi)始step by step搭建一個(gè)自己的SSR應(yīng)用程序
安裝vue-cli3
全局安裝vue-cli腳手架
npm install @vue/cli -g --registry=https://registry.npm.taobao.org
創(chuàng)建一個(gè)vue項(xiàng)目
vue create ssr-example
會(huì)進(jìn)入到一個(gè)交互bash界面,按自己需要選擇
一步一步回車(chē),根據(jù)自己需要選擇
運(yùn)行項(xiàng)目
npm run serve
看到這個(gè)提示,說(shuō)明成功了一半了,接下來(lái)進(jìn)行后一半的改造。
3、進(jìn)行SSR改造
3.1 安裝需要的包
npm install vue-server-renderer lodash.merge webpack-node-externals cross-env --registry=https://registry.npm.taobao.org --save-dev
3.2 在服務(wù)器中集成
在項(xiàng)目根目錄下新建一個(gè)server.js
安裝koa2
npm install koa koa-static --save --registry=https://registry.npm.taobao.org
在koa2集成ssr
// server.js // 第 1 步:創(chuàng)建一個(gè) Vue 實(shí)例 const Vue = require("vue"); const Koa = require("koa"); const app = new Koa(); // 第 2 步:創(chuàng)建一個(gè) renderer const renderer = require("vue-server-renderer").createRenderer(); // 第 3 步:添加一個(gè)中間件來(lái)處理所有請(qǐng)求 app.use(async (ctx, next) => { const vm = new Vue({ data: { title: "ssr example", url: ctx.url }, template: `<div>訪問(wèn)的 URL 是: {{ url }}</div>` }); // 將 Vue 實(shí)例渲染為 HTML renderer.renderToString(vm, (err, html) => { if(err){ res.status(500).end('Internal Server Error') return } ctx.body = html }); }); const port = 3000; app.listen(port, function() { console.log(`server started at localhost:${port}`); });
運(yùn)行server.js
node server.js
看到這個(gè)說(shuō)明一個(gè)簡(jiǎn)單的ssr構(gòu)建成功了。
不過(guò)到目前為止,我們并沒(méi)有將客戶端的.vue文件通過(guò)服務(wù)端進(jìn)行渲染,那么如何將前端的.vue文件與后端node進(jìn)行結(jié)合呢?
3.3 改造前端配置,以支持SSR
1、修改源碼結(jié)構(gòu)
main.js 是我們應(yīng)用程序的「通用 entry」。在純客戶端應(yīng)用程序中,我們將在此文件中創(chuàng)建根 Vue 實(shí)例,并直接掛載到 DOM。但是,對(duì)于服務(wù)器端渲染(SSR),責(zé)任轉(zhuǎn)移到純客戶端 entry 文件。app.js 簡(jiǎn)單地使用 export 導(dǎo)出一個(gè) createApp 函數(shù):
// main.js import Vue from 'vue' import App from './App.vue' import { createRouter } from "./router"; // 導(dǎo)出一個(gè)工廠函數(shù),用于創(chuàng)建新的 // 應(yīng)用程序、router 和 store 實(shí)例 export function createApp () { const router = createRouter(); const app = new Vue({ router, // 根實(shí)例簡(jiǎn)單的渲染應(yīng)用程序組件。 render: h => h(App) }) return { app } }
修改entry-client.js
客戶端 entry 只需創(chuàng)建應(yīng)用程序,并且將其掛載到 DOM 中
import { createApp } from './app' // 客戶端特定引導(dǎo)邏輯…… const { app } = createApp() // 這里假定 App.vue 模板中根元素具有 `id="app"` app.$mount('#app')
修改entry-server.js
服務(wù)器 entry 使用 default export 導(dǎo)出函數(shù),并在每次渲染中重復(fù)調(diào)用此函數(shù)。
import { createApp } from "./main"; export default context => { // 因?yàn)橛锌赡軙?huì)是異步路由鉤子函數(shù)或組件,所以我們將返回一個(gè) Promise, // 以便服務(wù)器能夠等待所有的內(nèi)容在渲染前, // 就已經(jīng)準(zhǔn)備就緒。 return new Promise((resolve, reject) => { const { app, router, store } = createApp(); // 設(shè)置服務(wù)器端 router 的位置 router.push(context.url); // 等到 router 將可能的異步組件和鉤子函數(shù)解析完 router.onReady(() => { const matchedComponents = router.getMatchedComponents(); // 匹配不到的路由,執(zhí)行 reject 函數(shù),并返回 404 if (!matchedComponents.length) { return reject({ code: 404 }); } // Promise 應(yīng)該 resolve 應(yīng)用程序?qū)嵗?,以便它可以渲? resolve(app); }, reject); }); };
修改router.js
import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' Vue.use(Router) export function createRouter(){ return new Router({ mode: 'history', //一定要是history模式 routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }) }
2、修改webpack配置
在vue-cli3創(chuàng)建的vue項(xiàng)目,已經(jīng)沒(méi)有了之前的webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js。那么如何進(jìn)行webpack的配置呢?
在vue-cli官網(wǎng)上也說(shuō)明了如何使用。 調(diào)整 webpack 配置最簡(jiǎn)單的方式就是在 vue.config.js 中的 configureWebpack 選項(xiàng)提供一個(gè)對(duì)象,該對(duì)象將會(huì)被 webpack-merge 合并入最終的 webpack 配置。
在項(xiàng)目根目錄下,新建一個(gè)vue.config.js
// vue.config.js const VueSSRServerPlugin = require("vue-server-renderer/server-plugin"); const VueSSRClientPlugin = require("vue-server-renderer/client-plugin"); const nodeExternals = require("webpack-node-externals"); const merge = require("lodash.merge"); const TARGET_NODE = process.env.WEBPACK_TARGET === "node"; const target = TARGET_NODE ? "server" : "client"; module.exports = { configureWebpack: () => ({ // 將 entry 指向應(yīng)用程序的 server / client 文件 entry: `./src/entry-${target}.js`, // 對(duì) bundle renderer 提供 source map 支持 devtool: 'source-map', target: TARGET_NODE ? "node" : "web", node: TARGET_NODE ? undefined : false, output: { libraryTarget: TARGET_NODE ? "commonjs2" : undefined }, // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals // 外置化應(yīng)用程序依賴模塊??梢允狗?wù)器構(gòu)建速度更快, // 并生成較小的 bundle 文件。 externals: nodeExternals({ // 不要外置化 webpack 需要處理的依賴模塊。 // 你可以在這里添加更多的文件類(lèi)型。例如,未處理 *.vue 原始文件, // 你還應(yīng)該將修改 `global`(例如 polyfill)的依賴模塊列入白名單 whitelist: [/\.css$/] }), optimization: { splitChunks: { chunks: "async", minSize: 30000, minChunks: 2, maxAsyncRequests: 5, maxInitialRequests: 3 } }, plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()] }), chainWebpack: config => { config.module .rule("vue") .use("vue-loader") .tap(options => { merge(options, { optimizeSSR: false }); }); } };
修改package,新增三個(gè)腳本來(lái)生成bundle.json
"build:client": "vue-cli-service build", "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build", "build:win": "npm run build:server && move dist\\vue-ssr-server-bundle.json bundle && npm run build:client && move bundle dist\\vue-ssr-server-bundle.json",
執(zhí)行命令
npm run build:win
在dist目錄下會(huì)生成兩個(gè)json文件
3.4 改造server.js 代碼
const fs = require("fs"); const Koa = require("koa"); const path = require("path"); const koaStatic = require('koa-static') const app = new Koa(); const resolve = file => path.resolve(__dirname, file); // 開(kāi)放dist目錄 app.use(koaStatic(resolve('./dist'))) // 第 2 步:獲得一個(gè)createBundleRenderer const { createBundleRenderer } = require("vue-server-renderer"); const bundle = require("./dist/vue-ssr-server-bundle.json"); const clientManifest = require("./dist/vue-ssr-client-manifest.json"); const renderer = createBundleRenderer(bundle, { runInNewContext: false, template: fs.readFileSync(resolve("./src/index.temp.html"), "utf-8"), clientManifest: clientManifest }); function renderToString(context) { return new Promise((resolve, reject) => { renderer.renderToString(context, (err, html) => { err ? reject(err) : resolve(html); }); }); } // 第 3 步:添加一個(gè)中間件來(lái)處理所有請(qǐng)求 app.use(async (ctx, next) => { const context = { title: "ssr test", url: ctx.url }; // 將 context 數(shù)據(jù)渲染為 HTML const html = await renderToString(context); ctx.body = html; }); const port = 3000; app.listen(port, function() { console.log(`server started at localhost:${port}`); });
3.5 運(yùn)行server.js
node server.js
訪問(wèn)localhost:3000,可以看到頁(yè)面的數(shù)據(jù)都是又服務(wù)端渲染完成后返回的。到這一步已經(jīng)基本算完成了SSR的構(gòu)建了。
如果有問(wèn)題的話,可以把dist目錄下的index.html文件刪了。避免直接訪問(wèn)到了該html文件。
4、集成vuex
修改store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export function createStore() { return new Vuex.Store({ state: { }, mutations: { }, actions: { } }); }
修改main.js
import Vue from "vue"; import App from "./App.vue"; import { createRouter } from "@/router"; import { createStore } from "@/store"; export function createApp() { const router = createRouter(); const store = createStore() // + const app = new Vue({ router, store, // + render: h => h(App) }); return { app, router }; }
再次運(yùn)行腳本構(gòu)建
npm run build:win node server.js
5、案例代碼
附上案例源碼 https://github.com/lentoo/vue-cli-ssr-example歡迎star
6、總結(jié)
到目前為止,僅僅是完成了SSR的基礎(chǔ)部分,還有相關(guān)的 SSR熱更新之類(lèi)的問(wèn)題還需要繼續(xù)探索。如果有好的熱更新方法歡迎發(fā)出了參考參考。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。