vue/vue-cli+express手把教你搭建SSR

export default () => {
return new vueRouter({
mode:"history",
routers:[
{
path:"/",
component:HelloWorld,
name:"HelloWorld"
}
] })
}

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,
    component:{App},
    template:"<App/>"
  });
  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.onRady(() => {
      let matchedComponents = router.getMatchedComponents();
      if(!matchedComponents.length){
        return reject({
          code:404,
        });
      }
      reslove(app);
    },reject)
  })
}

entry-client.js

import createApp from "./app.js";
let {app,router} = createApp();
router.onReady(() => {
  app.$mount("#app");
});
webpack.base.conf.js
module.exports = {
  entry:{
    app:"./src/entry-client.js"
  },
  output:{
    publicpath:"http://localhost:8080/"
  }
};

webpack.server.conf.js(手动创建)

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-render/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 webapck.DefinePlugin({
      'process.env.NODE_ENV':'"devlopment"',
      'process.ent.VUE_ENV': '"server"'
    }),
    new vueSSRServerPlugin()
  ]});

dev-server.js(手动创建)

const serverConf = require("./webpack.server.conf");
const webpack = require("webpack");
const fs = require("fs");
const path = require("path");
// 读取内存中的.json文件
// 这个模块需要手动安装								 
 9/11   首页 上一页 7 8 9 10 11 下一页 尾页