通過vue-cli3構(gòu)建一個SSR應用程序的方法

npm install @vue/cli -g --registry=https://registry.npm.taobao.org

vue create ssr-example 

npm run serve

npm install vue-server-renderer lodash.merge webpack-node-externals cross-env --registry=https://registry.npm.taobao.org --save-dev

npm install koa koa-static --save --registry=https://registry.npm.taobao.org

// server.js
// 第 1 步：創(chuàng)建一個 Vue 實例
const Vue = require("vue");

const Koa = require("koa");
const app = new Koa();
// 第 2 步：創(chuàng)建一個 renderer
const renderer = require("vue-server-renderer").createRenderer();


// 第 3 步：添加一個中間件來處理所有請求
app.use(async (ctx, next) => {
 const vm = new Vue({
 data: {
 title: "ssr example",
 url: ctx.url
 },
 template: `<div>訪問的 URL 是： {{ url }}</div>`
 });
 // 將 Vue 實例渲染為 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}`);
});

node server.js

// main.js
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from "./router";

// 導出一個工廠函數(shù)，用于創(chuàng)建新的
// 應用程序、router 和 store 實例
export function createApp () {
 const router = createRouter();
 const app = new Vue({
 router,
 // 根實例簡單的渲染應用程序組件。
 render: h => h(App)
 })
 return { app }
}

import { createApp } from './app'

// 客戶端特定引導邏輯……
const { app } = createApp()

// 這里假定 App.vue 模板中根元素具有 `id="app"`
app.$mount('#app')

import { createApp } from "./main";

export default context => {
 // 因為有可能會是異步路由鉤子函數(shù)或組件，所以我們將返回一個 Promise，
 // 以便服務器能夠等待所有的內(nèi)容在渲染前，
 // 就已經(jīng)準備就緒。
 return new Promise((resolve, reject) => {
 const { app, router, store } = createApp();

 // 設置服務器端 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 應該 resolve 應用程序?qū)嵗?，以便它可以渲? resolve(app);
 }, reject);
 });
};

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')
 }
 ]
 })
}

// 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 指向應用程序的 server / client 文件
 entry: `./src/entry-${target}.js`,
 // 對 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
 // 外置化應用程序依賴模塊?？梢允狗掌鳂?gòu)建速度更快，
 // 并生成較小的 bundle 文件。
 externals: nodeExternals({
 // 不要外置化 webpack 需要處理的依賴模塊。
 // 你可以在這里添加更多的文件類型。例如，未處理 *.vue 原始文件，
 // 你還應該將修改 `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
 });
 });
 }
};

"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",

npm run build:win

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);
// 開放dist目錄
app.use(koaStatic(resolve('./dist')))

// 第 2 步：獲得一個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 步：添加一個中間件來處理所有請求
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}`);
});

node server.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export function createStore() {
 return new Vuex.Store({
 state: {

 },
 mutations: {

 },
 actions: {

 }
 });
}

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 };
}

npm run build:win
node server.js