const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.conf.js')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

module.exports = merge(baseConfig, {
 entry: './src/entry-client.js',
 plugins: [
  new webpack.optimize.CommonsChunkPlugin({
   name: "manifest",
   minChunks: Infinity
  }),
  // 此插件在輸出目錄中
  // 生成 `vue-ssr-client-manifest.json`。
  new VueSSRClientPlugin(),
  new HtmlWebpackPlugin({
   template: path.resolve(__dirname, './../src/index.template.html'),
   filename: 'index.template.html'
  })
 ]
})

const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.conf.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(baseConfig, {
 // 將 entry 指向應(yīng)用程序的 server entry 文件
 entry: './src/entry-server.js',

 // 這允許 webpack 以 Node 適用方式(Node-appropriate fashion)處理動態(tài)導(dǎo)入(dynamic import)，
 // 并且還會在編譯 Vue 組件時，
 // 告知 `vue-loader` 輸送面向服務(wù)器代碼(server-oriented code)。
 target: 'node',

 // 對 bundle renderer 提供 source map 支持
 devtool: 'source-map',

 // 此處告知 server bundle 使用 Node 風(fēng)格導(dǎo)出模塊(Node-style exports)
 output: {
  libraryTarget: 'commonjs2'
 },
 externals: nodeExternals({
  // 不要外置化 webpack 需要處理的依賴模塊。
  // 你可以在這里添加更多的文件類型。例如，未處理 *.vue 原始文件，
  // 你還應(yīng)該將修改 `global`（例如 polyfill）的依賴模塊列入白名單
  whitelist: /\.css$/
 }),

 // 這是將服務(wù)器的整個輸出
 // 構(gòu)建為單個 JSON 文件的插件。
 // 默認文件名為 `vue-ssr-server-bundle.json`
 plugins: [
  new VueSSRServerPlugin()
 ]
})

// main.js
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
import { createStore } from './store/store.js'
import { sync } from 'vuex-router-sync'

export function createApp () {
 // 創(chuàng)建 router 實例
 const router = createRouter()
 const store = createStore()

 // 同步路由狀態(tài)(route state)到 store
 sync(store, router)

 const app = new Vue({
  // 注入 router 到根 Vue 實例
  router,
  store,
  render: h => h(App)
 })

 // 返回 app 和 router
 return { app, router, store }
}

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)


export let createRouter = () => {
 let route = new Router({
  mode:'history',
  routes: []
 })
 return route
}

// store.js
// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export function createStore () {
 return new Vuex.Store({
  state: {
  },
  actions: {
  },
  mutations: {
  }
 })
}

<!-- Item.vue -->
<template>
 <div>{{ item.title }}</div>
</template>

<script>
export default {
 asyncData ({ store, route }) {
  // 觸發(fā) action 后，會返回 Promise
  return store.dispatch('fetchItem', route.params.id)
 },
 computed: {
  // 從 store 的 state 對象中的獲取 item。
  item () {
   return this.$store.state.items[this.$route.params.id]
  }
 }
}
</script>

// entry-server.js
import { createApp } from './app'

export default context => {
 return new Promise((resolve, reject) => {
  const { app, router, store } = createApp()

  router.push(context.url)

  router.onReady(() => {
   const matchedComponents = router.getMatchedComponents()
   if (!matchedComponents.length) {
    return reject({ code: 404 })
   }

   // 對所有匹配的路由組件調(diào)用 `asyncData()`
   Promise.all(matchedComponents.map(Component => {
    if (Component.asyncData) {
     return Component.asyncData({
      store,
      route: router.currentRoute
     })
    }
   })).then(() => {
    // 在所有預(yù)取鉤子(preFetch hook) resolve 后，
    // 我們的 store 現(xiàn)在已經(jīng)填充入渲染應(yīng)用程序所需的狀態(tài)。
    // 當我們將狀態(tài)附加到上下文，
    // 并且 `template` 選項用于 renderer 時，
    // 狀態(tài)將自動序列化為 `window.__INITIAL_STATE__`，并注入 HTML。
    context.state = store.state

    resolve(app)
   }).catch(reject)
  }, reject)
 })
}

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

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

const express = require("express");

const fs = require('fs');
let path = require("path");
const server = express()
const { createBundleRenderer } = require('vue-server-renderer')

let renderer

const resolve = file => path.resolve(__dirname, file)
const templatePath = resolve('./src/index.template.html')
function createRenderer (bundle, options) {

 return createBundleRenderer(bundle, Object.assign(options, {
  runInNewContext: false
 }))
}

const template = fs.readFileSync(templatePath, 'utf-8')
const bundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
renderer = createRenderer(bundle, {
 template,
 clientManifest
})


server.use(express.static('./dist'))
// 在服務(wù)器處理函數(shù)中……
server.get('*', (req, res) => {
 const context = { url: req.url }
 // 這里無需傳入一個應(yīng)用程序，因為在執(zhí)行 bundle 時已經(jīng)自動創(chuàng)建過。
 renderer.renderToString(context, (err, html) => {
  // 處理異?！?
  res.end(html)
 })
})
server.listen(3001, () => {
  console.log('服務(wù)已開啟')
})

//server.dev.conf.js

const fs = require('fs')
const path = require('path')
const MFS = require('memory-fs')
const webpack = require('webpack')
const chokidar = require('chokidar')
const clientConfig = require('./webpack.client.conf.js')
const serverConfig = require('./webpack.server.conf.js')

const readFile = (fs, file) => {
 try {
  return fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
 } catch (e) {}
}

module.exports = function setupDevServer (app, templatePath, cb) {
 let bundle
 let template
 let clientManifest

 let ready
 const readyPromise = new Promise(r => { ready = r })
 const update = () => {
  if (bundle && clientManifest) {
   ready()
   cb(bundle, {
    template,
    clientManifest
   })
  }
 }

 // read template from disk and watch
 template = fs.readFileSync(templatePath, 'utf-8')
 chokidar.watch(templatePath).on('change', () => {
  template = fs.readFileSync(templatePath, 'utf-8')
  console.log('index.html template updated.')
  update()
 })

 // modify client config to work with hot middleware
 clientConfig.entry.app = ['webpack-hot-middleware/client', clientConfig.entry.app]
 clientConfig.output.filename = '[name].js'
 clientConfig.plugins.push(
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin()
 )

 // dev middleware
 const clientCompiler = webpack(clientConfig)
 const devMiddleware = require('webpack-dev-middleware')(clientCompiler, {
  publicPath: clientConfig.output.publicPath,
  noInfo: true
 })
 app.use(devMiddleware)
 clientCompiler.plugin('done', stats => {
  stats = stats.toJson()
  stats.errors.forEach(err => console.error(err))
  stats.warnings.forEach(err => console.warn(err))
  if (stats.errors.length) return
  clientManifest = JSON.parse(readFile(
   devMiddleware.fileSystem,
   'vue-ssr-client-manifest.json'
  ))
  update()
 })

 // hot middleware
 app.use(require('webpack-hot-middleware')(clientCompiler, { heartbeat: 5000 }))

 // watch and update server renderer
 const serverCompiler = webpack(serverConfig)
 const mfs = new MFS()
 serverCompiler.outputFileSystem = mfs
 serverCompiler.watch({}, (err, stats) => {
  if (err) throw err
  stats = stats.toJson()
  if (stats.errors.length) return

  // read bundle generated by vue-ssr-webpack-plugin
  bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
  update()
 })

 return readyPromise
}

//server.js
const express = require("express");

const fs = require('fs');
let path = require("path");
const server = express()
const { createBundleRenderer } = require('vue-server-renderer')
const isProd = process.env.NODE_ENV === 'production'
let renderer
let readyPromise
const resolve = file => path.resolve(__dirname, file)
const templatePath = resolve('./src/index.template.html')
function createRenderer (bundle, options) {
 return createBundleRenderer(bundle, Object.assign(options, {
  runInNewContext: false
 }))
}

if(isProd){
 const template = fs.readFileSync(templatePath, 'utf-8')
 const bundle = require('./dist/vue-ssr-server-bundle.json')
 const clientManifest = require('./dist/vue-ssr-client-manifest.json')
 renderer = createRenderer(bundle, {
  template,
  clientManifest
 })

}else{
 readyPromise = require('./build/server.dev.conf.js')(
  server,
  templatePath,
  (bundle, options) => {
   renderer = createRenderer(bundle, options)
  }
 )
}
server.use(express.static('./dist'))
// 在服務(wù)器處理函數(shù)中……
server.get('*', (req, res) => {
 const context = { url: req.url }
 // 這里無需傳入一個應(yīng)用程序，因為在執(zhí)行 bundle 時已經(jīng)自動創(chuàng)建過。
 // 現(xiàn)在我們的服務(wù)器與應(yīng)用程序已經(jīng)解耦！
 if(isProd){
  renderer.renderToString(context, (err, html) => {
   // 處理異常……
   res.end(html)
  })
 }else{
  readyPromise.then(()=>{
   renderer.renderToString(context, (err, html) => {
    // 處理異?！?
    res.end(html)
   })
  })
 }
})
server.listen(3001, () => {
  console.log('服務(wù)已開啟')
})