基於vue-cli項目添加服務端渲染

時間 2019-11-18

標籤基於 vue cli 項目添加服務渲染简体版

原文原文鏈接

兩個示例的git地址:

1. 個人環境

2. 方式一：使用prerender-spa-plugin插件得到SSR的效果。

2.1 說明

2.2 初始化

1	vue init webpack vue-prerender-demo //此文章都是在webpack基礎上配置的

1
2
3

cd vue-prerender-demo
npm install
npm run dev

2.3 配置

2.4 開始

1. 安裝 prerender-spa-plugin，由於依賴`phantom js`，phantom 的安裝比較蛋疼，太耗時了~

1	npm install prerender-spa-plugin -D

2. 開始 prerender 相關的配置：

//引用
var PrerenderSpaPlugin = require('prerender-spa-plugin')

//...

plugins: {
 //....
 //配置 prerender-spa-plugin
 new PrerenderSpaPlugin(
 // 生成文件的路徑，此處與webpack打包地址一致
 path.join(config.build.assetsRoot), //config.build.assetsRoot爲vue cli生成的配置，打包後的文件地址
 // 配置要作預渲染的路由，只支持h5 history方式
 [ '/', '/test']
 )

 //....
}

3. 編譯

1	npm run build

4. 驗證

1 2	cd dist //進入到對應目錄 python -m SimpleHTTPServer 8888 //將dist做爲根目錄，啓動8888端口，

2.5 優缺點

3. 方式二：使用官方提供的輪子在node端作SSR

3.1 說明

3.2 約束

3.3 準備工做

1	vue init webpack vue-ssr-demo

1
2
3

cd vue-ssr-demo
npm install
npm run dev

3.4 開始折騰

1. 首先安裝 ssr 支持

1	npm i -D vue-server-renderer

2. 增長路由`test`與頁面

<template>
 <div>
 Just a test page.
 <div>
 <router-link to="/">Home</router-link>
 </div>
 <div><h2>{{mode}}</h2></div>
 <div><span>{{count}}</span></div>
 <div><button @click="count++">+1</button></div>
 </div>
</template>
<script>
 export default {
 data () {
 return {
 mode: process.env.VUE_ENV === 'server' ? 'server' : 'client',
 count: 2
 }
 }
 }
</script>

3. 在`src`目錄下建立兩個js:

1
2
3

src
├── entry-client.js # 僅運行於瀏覽器
└── entry-server.js # 僅運行於服務器

4. 修改`router`配置。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export function createRouter () {
 return new Router({
 mode: 'history', // 注意這裏也是爲history模式
 routes: [
 {
 path: '/',
 name: 'Hello',
 component: HelloWorld
 }, {
 path: '/test',
 name: 'Test',
 component: () => import('@/components/Test') // 異步組件
 }
 ]
 })
}

5. 改造`main.js`

import Vue from 'vue'
import App from './App'
import { createRouter } from './router'

export function createApp () {
 // 建立 router 實例
 const router = new createRouter()
 const app = new Vue({
 // 注入 router 到根 Vue 實例
 router,
 render: h => h(App)
 })
 // 返回 app 和 router
 return { app, router }
}

6. `entry-client.js`加入如下內容：

import { createApp } from './main'
const { app, router } = createApp()
// 由於可能存在異步組件，因此等待router將全部異步組件加載完畢，服務器端配置也須要此操做
router.onReady(() => {
 app.$mount('#app')
})

7. `entry-server.js`

// entry-server.js
import { createApp } from './main'
export default context => {
 // 由於有可能會是異步路由鉤子函數或組件，因此咱們將返回一個 Promise，
 // 以便服務器可以等待全部的內容在渲染前，
 // 就已經準備就緒。
 return new Promise((resolve, reject) => {
 const { app, router } = createApp()
 // 設置服務器端 router 的位置
 router.push(context.url)
 // 等到 router 將可能的異步組件和鉤子函數解析完
 router.onReady(() => {
 const matchedComponents = router.getMatchedComponents()
 // 匹配不到的路由，執行 reject 函數，並返回 404
 if (!matchedComponents.length) {
 // eslint-disable-next-line
 return reject({ code: 404 })
 }
 // Promise 應該 resolve 應用程序實例，以便它能夠渲染
 resolve(app)
 }, reject)
 })
}

8. `webpack`配置

build
├── webpack.base.conf.js # 基礎通用配置
├── webpack.client.conf.js # 客戶端打包配置
└── webpack.server.conf.js # 服務器端打包配置

9. webpack 客戶端的配置

const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
 // ...
 // ...
 plugins: [
 new webpack.DefinePlugin({
 'process.env': env,
 'process.env.VUE_ENV': '"client"' // 增長process.env.VUE_ENV
 }),
 //...
 // 另外須要將 prod 的HtmlWebpackPlugin 去除，由於咱們有了vue-ssr-client-manifest.json以後，服務器端會幫咱們作好這個工做。
 // new HtmlWebpackPlugin({
 // filename: config.build.index,
 // template: 'index.html',
 // inject: true,
 // minify: {
 // removeComments: true,
 // collapseWhitespace: true,
 // removeAttributeQuotes: true
 // // more options:
 // // https://github.com/kangax/html-minifier#options-quick-reference
 // },
 // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 // chunksSortMode: 'dependency'
 // }),

 // 此插件在輸出目錄中
 // 生成 `vue-ssr-client-manifest.json`。
 new VueSSRClientPlugin()
 ]
// ...

10. webpack 服務器端的配置

const webpack = require('webpack')
const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.conf.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
// 去除打包css的配置
baseConfig.module.rules[1].options = ''

module.exports = merge(baseConfig, {
 // 將 entry 指向應用程序的 server entry 文件
 entry: './src/entry-server.js',
 // 這容許 webpack 以 Node 適用方式(Node-appropriate fashion)處理動態導入(dynamic import)，
 // 而且還會在編譯 Vue 組件時，
 // 告知 `vue-loader` 輸送面向服務器代碼(server-oriented code)。
 target: 'node',
 // 對 bundle renderer 提供 source map 支持
 devtool: 'source-map',
 // 此處告知 server bundle 使用 Node 風格導出模塊(Node-style exports)
 output: {
 libraryTarget: 'commonjs2'
 },
 // https://webpack.js.org/configuration/externals/#function
 // https://github.com/liady/webpack-node-externals
 // 外置化應用程序依賴模塊。可使服務器構建速度更快，
 // 並生成較小的 bundle 文件。
 externals: nodeExternals({
 // 不要外置化 webpack 須要處理的依賴模塊。
 // 你能夠在這裏添加更多的文件類型。例如，未處理 *.vue 原始文件，
 // 你還應該將修改 `global`（例如 polyfill）的依賴模塊列入白名單
 whitelist: /\.css$/
 }),
 plugins: [
 new webpack.DefinePlugin({
 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
 'process.env.VUE_ENV': '"server"'
 }),
 // 這是將服務器的整個輸出
 // 構建爲單個 JSON 文件的插件。
 // 默認文件名爲 `vue-ssr-server-bundle.json`
 new VueSSRServerPlugin()
 ]
})

1	baseConfig.module.rules[1].options = '' // 去除分離css打包的插件

11. 配置`package.json`增長打包服務器端構建命令並修改原打包命令

"scripts": {
 //...
 "build:client": "node build/build.js",
 "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules",
 "build": "rimraf dist && npm run build:client && npm run build:server"
}

12. 修改`index.html`

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>vue-ssr-demo</title>
 </head>
 <body>
 <!--vue-ssr-outlet-->
 </body>
</html>

13. 運行構建命令

1	npm run build

14. 構建服務器端(官方例子使用的`express`，因此此 demo 將採用`koa2`來做爲服務器端，固然，不管是 koa 與 express 都不重要…)

1	npm i -S koa

const Koa = require('koa')
const app = new Koa()

// response
app.use(ctx => {
 ctx.body = 'Hello Koa'
})

app.listen(3001)

15. 編寫服務端代碼

const Koa = require('koa')
const app = new Koa()
const fs = require('fs')
const path = require('path')
const { createBundleRenderer } = require('vue-server-renderer')

const resolve = file => path.resolve(__dirname, file)

// 生成服務端渲染函數
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'), {
 // 推薦
 runInNewContext: false,
 // 模板html文件
 template: fs.readFileSync(resolve('./index.html'), 'utf-8'),
 // client manifest
 clientManifest: require('./dist/vue-ssr-client-manifest.json')
})

function renderToString (context) {
 return new Promise((resolve, reject) => {
 renderer.renderToString(context, (err, html) => {
 err ? reject(err) : resolve(html)
 })
 })
}
app.use(require('koa-static')(resolve('./dist')))
// response
app.use(async (ctx, next) => {
 try {
 const context = {
 title: '服務端渲染測試', // {{title}}
 url: ctx.url
 }
 // 將服務器端渲染好的html返回給客戶端
 ctx.body = await renderToString(context)

 // 設置請求頭
 ctx.set('Content-Type', 'text/html')
 ctx.set('Server', 'Koa2 server side render')
 } catch (e) {
 // 若是沒找到，放過請求，繼續運行後面的中間件
 next()
 }
})

app.listen(3001)