webpack.server.config.js

const webpack = require('webpack');
const merge = require('webpack-merge');

const base = require('./webpack.base.conf');
module.exports = merge(base,{
    target:"node",
    entry:"./src/entry-server.js",
    output:{
        filename:"bundle.server.js",
        libraryTarget:"commonjs2"
    },
    plugins:[
        
    ]
})

webpack.client.config.js

const webpack = require("webpack");
const vueLoaderConfig = require('./vue-loader.conf');
const utils = require('./utils')
const path  = require("path");
function resolve(dir){
    return path.join(__dirname,"..",dir);
}
module.exports = {
    entry: {
        app: './src/entry-client.js'
    },
    output: {
        path: path.resolve(__dirname,'../dist'),
        filename: 'bundle.client.js',
        publicPath: '/dist/'
    },
    plugins:[
        // new VueSSRServerPlugin();
    ],
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src')
        }
    },
    module: {
        rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
            limit: 10000,
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
            limit: 10000,
            name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
            limit: 10000,
            name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }
        ]
    }
}

entry-server.js

import { createApp } from './main';

export default context => {
    
    return new Promise((resolve,reject) =>{
        const { app,router,store } = createApp()
        const url = context.url;
        router.push(url);
        router.onReady(()=>{
            const matchedComponents = router.getMatchedComponents();
            if(!matchedComponents.length){
                reject({code:404})
            }
            let asyncDataPromiseFns = [];
            matchedComponents.map( component => {
                if(component.serverRequest){
                    asyncDataPromiseFns.push(component.serverRequest(store));
                }   
            })
            //遍历路由下所有的组件，如果有需要服务端渲染的请求，则进行请求
            Promise.all(asyncDataPromiseFns).then(()=>{
                context.state = store.state;
                resolve(app);
            }).catch(reject)
        },reject)
    })
}

entry-client.js

//客户端的入口文件
import { createApp } from './main';

const { app,router,store } = createApp();

if(window.__INITIAL_STATE__){
    store.replaceState(window.__INITIAL_STATE__);
}

window.onload = function(){
    app.$mount('#app');
}

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// import router from './router'
import createRouter from "./router";
import createStore from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
export function createApp () {
  const router = createRouter();
  const store = createStore();
  const app = new Vue({
   router,
   store,
   // 根实例简单的渲染应用程序组件。
   render: h => h(App)
  })
  return { app,router,store,App }
 }

路由配置文件

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
import about from '@/components/about'


Vue.use(Router)

export default () => {
  return new Router({
    mode: 'history', //一定要是history模式
    routes: [
      {
        path: '/',
        name: 'home',
        component: home
      },
      {
        path: '/about',
        name: 'about',
        component: about
      }
    ]
  })
} 

Vuex配置文件

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);

export default function createStore(){
    let store = new Vuex.Store({
        state:{
            homeInfo:''
        },
        actions:{
            getHomeInfo({commit}){
                return new Promise((resolve,reject)=>{
                    axios.get("api地址").then(res=>{
                        commit('setHomeInfo',res.data);
                        resolve();
                    }).catch(reject);
                })
            }
        },
        mutations:{
            setHomeInfo(state,data){
                state.homeInfo = data;
            }
        }
    })
    return store;
}

请求数据的页面

<template>
    <div class="home">
        <h1>这是首页</h1>
        <div>{{homeInfo.message}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            
            }
        },
        serverRequest(store){
            return store.dispatch('getHomeInfo')
        },
        computed:{
            homeInfo(){
                return this.$store.state.homeInfo;
            }
        }
    }
</script>

package.json的scripts配置信息

 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "server": "webpack --config build/webpack.server.config.js",
    "client": "webpack --config build/webpack.client.config.js"
  }

服务器文件

const Vue = require('vue');
const Koa = require('koa');
const server = new Koa();
const path = require("path");
const koaStatic = require('koa-static');
const router = require('koa-router')();


//创建服务端渲染器
const renderer = require("vue-server-renderer").createRenderer();
const createApp = require('./dist/bundle.server.js')['default'];

//设置静态资源目录
server.use(koaStatic(path.resolve(__dirname,"./dist")))

const  clientBundleFileUrl = "/bundle.client.js";


router.get('/text',async ctx=>{
    ctx.body={
        code:1,
        message:"我是服务器返回的测试内容！"
    }
})

router.get('*',async ctx=>{
    const context = { url:ctx.request.url };
    try{
        const app = await createApp(context);
        let state = JSON.stringify(context.state);
        const resHtml = await renderer.renderToString(app);
        ctx.body=`
            <!DOCTYPE html>
            <html>
            <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width,initial-scale=1.0">
                <title>Vue2.0 SSR渲染页面</title>
                <script>window.__INITIAL_STATE__=${state}</script>
                <script src="${clientBundleFileUrl}"></script>
            </head>
            <body>
                ${resHtml}
            </body>
            </html>        
        `;
    }catch(err){
        ctx.body="程序运行出错，请联系管理员进行处理！"
    }
    
})

server.use(router.routes());
server.use(router.allowedMethods());

server.listen(3000,()=>{
    console.log("服务已启动！");
});

利用到的插件

vue-server-renderer