//直接定义组件内部asyncData方法来触发相应的ajax获取数据
if (Component.asyncData) {
return Component.asyncData({
store,
route: router.currentRoute
})
}
以下是完整的服务端代码：
import { createApp } from './app'
import Q from 'q'
export default context => {
return new Q.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 })
}
// 对所有匹配的路由组件调用 `asyncData()`
Q.all(matchedComponents.map(Component => {
if (Component.asyncData) {
return Component.asyncData({
store,
route: router.currentRoute
})
}
})).then(() => {
// 在所有预取钩子(preFetch hook) resolve 后，
// 我们的 store 现在已经填充入渲染应用程序所需的状态。
// 当我们将状态附加到上下文，
// 并且 `template` 选项用于 renderer 时，
// 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
context.state = store.state
resolve(app)
}).catch(reject)
}, reject)
})
}
4、脚手架其他目录介绍：
到这里src下面主要的几个文件代码已经编写完成，接下里介绍下整个项目的目录结构如下：
主要几个文件介绍如下：
- build 主要存放webpack打包配置文件
- dist webpack打包后生成的目录
- log 使用pm2监控进程存放的日志文件目录
- server.js node服务器启动文件
- pmlog.json pm2配置文件
server.js入口文件编写
我们还需要编写在服务端启动服务的代码server.js，我们会使用到部分node原生提供的api，片段代码如下：
const Vue = require('vue')
const express = require('express')
const path = require('path')
const LRU = require('lru-cache')
const { createBundleRenderer } = require('vue-server-renderer')
const fs = require('fs')
const net = require('net')
大致思路是，引入前端模版页面index.template.html，使用express启动服务，引入webpack打包项目代码的dist文件，引入缓存模块（这里不做深入介绍，后期会单独详细介绍），判断端口是否被占用，自动启动其他接口服务。
引入前端模版文件并且设置环境变量为production，片段代码如下：
const template = fs.readFileSync('./src/index.template.html', 'utf-8')
const isProd = process.env.NODE_ENV === 'production'
vue-server-renderer插件的具体使用，通过读取dist文件夹下的目录文件，来创建createBundleRenderer函数，并且使用LRU来设置缓存的时间，通过判断是生产环境还是开发环境，调用不同的方法，代码片段如下：