ゼロからvue-ssrを構築する(下)

ゼロからvue-ssrを作ります.
前言
前回私達はゼロから簡単なvue-ssrを構築するデモを実現しました.ゼロからvue-ssrを構築する（上）.今回は、vue-cliに基づいてwebpackを改造し、vue-cliバージョンのvue-ssrを実現します.
改築を始める
追加設置依存
前回と違って、今回は私達はvue-cliに基づいて改造を行いました.すでに多くの依存ライブラリがあります.しかし、私達は核心を追加する必要があります.

npm install vue-server-renderer

クライアントのwebpack設定を変更します.
webpack.dev.co.nf.jsファイルを修正して、プラグインを追加します.

const vueSSRClientPlugin = require("vue-server-renderer/client-plugin");

const devWebpackConfig = merge(baseWebpackConfig,{
    plugins:[
        new vueSSRClientPlugin()
    ] 
});

この設定を追加したら、プロジェクトを再起動してアドレスを通じてvue-ssr-client-manifest.jsonにアクセスできます.ページに出てくる内容は必要なclient-bundleです.
vueの関連ファイルを修正します.
このステップはhttp://localhostと似ています.説明を繰り返さず、直接コードを変更します.

import vueRouter from "vue-router";
import Vue from "vue";
import HelloWorld from "@/components/HelloWorld";
import About from "@/components/About";

Vue.use(vueRouter);
export default () => {
  return new vueRouter({
    mode:"history",
    routes:[
      {
        path:"/",
        component:HelloWorld,
        name:"HelloWorld"
      },
      {
        path:"/about",
        component:About,
        name:"About"
      }
    ]
  })
}

app.jsを修正する

import Vue from "vue";
import createRouter from "./router";
import App from "./App.vue";

export default (context) => {
  const router = createRouter();
  const app = new Vue({
    router,
    components: { App },
    template: ''
  });
  return {
    app,
    router
  }
}

entry-server.jsを修正します.

import createApp from "./app.js";

export default (context) => {
    return new Promise((reslove,reject) => {
        let {url} = context;
        let {app,router} = createApp(context);
        router.push(url);
        router.onReady(() => {
            let matchedComponents = router.getMatchedComponents();
            if(!matchedComponents.length){
                return reject();
            }
            reslove(app);
        },reject)
    })
}

ntry-client.jsを修正します.

import createApp from "./app.js";
let {app,router} = createApp();

router.onReady(() => {
    app.$mount("#app");
});

webpackクライアントの入り口と出力を変更します.
webpack.base.com nf.jsを修正します.

module.exports = {
    entry:{
        app:"./src/entry-client.js"
    },
    output:{
        publicPath:"http://localhost:8080/"
    }
};

サービス端末webpakcの設定ファイルを作成します.
build/webpack.server.co nf.jsファイルを作成し、目的はプラグインvue-server-render/server-pluginをserver端に導入して実行します.

const webpack = require("webpack");
const merge = require("webpack-merge");
const base = require("./webpack.base.conf");
//      
//         ，          require  ，    node_modules    
const webapckNodeExternals = require("webpack-node-externals");


const vueSSRServerPlugin = require("vue-server-renderer/server-plugin");

module.exports = merge(base,{
    //    webpack，   node   
    target:"node",
    entry:"./src/entry-server.js",
    devtool:"source-map",
    output:{
        filename:'server-buldle.js',
        libraryTarget: "commonjs2"
    },
    externals:[
        webapckNodeExternals()
    ],
    plugins:[
        new webpack.DefinePlugin({
            'process.env.NODE_ENV':'"development"',
            'process.ent.VUE_ENV': '"server"'
        }),
        new vueSSRServerPlugin()
    ]
});

build/dev-server.jsを作成し、クライアントとサービス先のbundleファイルとindex.に読み込まれたテンプレートをレンダリングとして使用します.

const serverConf = require("./webpack.server.conf");
const webpack = require("webpack");
const fs = require("fs");
const path = require("path");
//        .json  
//            
const Mfs = require("memory-fs");
const axios = require("axios");

module.exports = (cb) => {
    const webpackComplier = webpack(serverConf);
    var mfs = new Mfs();
    
    webpackComplier.outputFileSystem = mfs;
    
    webpackComplier.watch({},async (error,stats) => {
        if(error) return console.log(error);
        stats = stats.toJson();
        stats.errors.forEach(error => console.log(error));
        stats.warnings.forEach(warning => console.log(warning));
        //    server bundle json  
        let serverBundlePath = path.join(serverConf.output.path,'vue-ssr-server-bundle.json');
        let serverBundle = JSON.parse(mfs.readFileSync(serverBundlePath,"utf-8"));
        //    client bundle json  
        let clientBundle = await axios.get("http://localhost:8082/vue-ssr-client-manifest.json");
        //      
        let template = fs.readFileSync(path.join(__dirname,"..","index.html"),"utf-8");
        cb && cb(serverBundle,clientBundle,template);
    })
};

ルートディレクトリの下でserver.jsファイルを作成してサービスを開始して、そしてcreateBundelendererを利用して二つのBundeleとhtmlテンプレートをレンダリングします.

const devServer = require("./build/dev-server.js");
const express = require("express");
const app = express();
const vueRender = require("vue-server-renderer");

app.get('*',(request,respones) => {
    respones.status(200);
    respones.setHeader("Content-Type","text/html;charset-utf-8;");
    devServer((serverBundle,clientBundle,template) => {
        let render = vueRender.createBundleRenderer(serverBundle,{
            template,
            clientManifest:clientBundle.data,
            //              
            renInNewContext:false
        }); 
        render.renderToString({
            url:request.url
        }).then((html) => {
            respones.end(html);
        }).catch(error => {
          respones.end(JSON.stringify(error));
        });
    });
})

app.listen(5001,() => {
    console.log("     ")
});

を追加します.
ルートディレクトリの下でindexを作成します.

最後にpackage.jsonにサービスを開始するコマンドを追加します.

"server": "node server.js"

成功しました.二つの端末を開けて、それぞれ入力します.

npm run dev
npm run server

ブラウザーはlocal hostを開けます.8082、私達はvue-cliから改造したvue-ssrを見ることができます.
締め括りをつける
本文は直接にvue-cliに基づいて改造した一つのssrバージョンであり、もしゼロからvue-ssrを引き裂こうとすれば、一つの文章を見ることができる.
プロジェクトのソースコード
ゼロからvue-ssrを構築する（上）