理解vue ssr原理并自己搭建簡單的ssr框架

import Vue from 'vue';
import App from './App.vue';
import createStore from './store/index.js';

function createApp() {
 const store = createStore();
 const app = new Vue({
   store,
   render: h => h(App)
 });
 return {app, store}
}

const { app, store } = createApp();

// 使用window.__INITIAL_STATE__中的數(shù)據(jù)替換整個(gè)state中的數(shù)據(jù)，這樣服務(wù)端渲染結(jié)束后，客戶端也可以自由操作state中的數(shù)據(jù)
if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__);
}

app.$mount('#app');

import Vue from 'vue';
import App from './App.vue';
import createStore from './store/index.js';

export default function(context) {
 // context是上下文對象
 const store = createStore();
 let app = new Vue({
  store,
  render: h => h(App)
 });

 // 找到所有 asyncData 方法
 let components = App.components;
 let asyncDataArr = []; // promise集合
 for (let key in components) {
  if (!components.hasOwnProperty(key)) continue;
  let component = components[key];
  if (component.asyncData) {
   asyncDataArr.push(component.asyncData({store})) // 把store傳給asyncData
  }
 }
 // 所有請求并行執(zhí)行
 return Promise.all(asyncDataArr).then(() => {
  // context.state 賦值成什么，window.__INITIAL_STATE__ 就是什么
  // 這下你應(yīng)該明白entry-client.js中window.__INITIAL_STATE__是哪來的了，它是在服務(wù)端渲染期間被添加進(jìn)上下文的
  context.state = store.state;
  return app;
 });
};

export default {
 asyncData: function({store}) {
  return store.dispatch('GET_ARTICLE') // 返回promise
 },
 computed: {
  article() {
   return this.$store.state.article
  }
 }
}

module.exports = merge(base, {
 entry: {
  client: path.join(__dirname, '../entry-client.js')
 }
});

module.exports = merge(base, {
 target: 'node', // 指定是node環(huán)境
 entry: {
  server: path.join(__dirname, '../entry-server.js')
 },
 output: {
  filename: '[name].js', // server.js
  libraryTarget: 'commonjs2' // 必須按照 commonjs規(guī)范打包才能被服務(wù)器調(diào)用。
 },
 plugins: [
  new HtmlWebpackPlugin({
   template: path.join(__dirname, '../index.ssr.html'),
   filename: 'index.ssr.html',
   files: {
    js: 'client.js'
   }, // client.js需要在html中引入
   excludeChunks: ['server'] // server.js只在服務(wù)端執(zhí)行，所以不能打包到html中
  })
 ]
});

const bundle = fs.readFileSync(path.resolve(__dirname, 'dist/server.js'), 'utf-8');
const renderer = require('vue-server-renderer').createBundleRenderer(bundle, {
 template: fs.readFileSync(path.resolve(__dirname, 'dist/index.ssr.html'), 'utf-8') // 服務(wù)端渲染數(shù)據(jù)
});


server.get('*', (req, res) => {
 renderer.renderToString((err, html) => {
  // console.log(html)
  if (err) {
   console.error(err);
   res.status(500).end('服務(wù)器內(nèi)部錯(cuò)誤');
   return;
  }
  res.end(html);
 })
});