koa 部分:
const serverBundleCode = fs.readFileSync(path.resolve(__dirname, '../ssr/bundle.js'))
const renderer = require('vue-server-renderer').createBundleRenderer(serverBundleCode)
const indexHTML = fs.readFileSync('templates/index.html', 'utf8')
router.get('*', async (ctx, next) => {
let context = {url: ctx.url}
const renderStream = renderer.renderToStream(context)
let [head, tail] = indexHTML.split('<div id=app></div>')
const transform = new StreamTransform(context, head, tail)
ctx.type ='text/html'
ctx.body = renderStream.on('error', (error) => {
console.log(error)
}).pipe(transform)
})
其中 StreamTransform
来自 https://github.com/leaves4j/vue-easy-renderer/blob/master/lib/transform.js(我做了一点点修改)
server-entry.js 是这样:
import { app, router, store } from './app'
export default context => {
router.push(context.url)
return Promise.all(router.getMatchedComponents().map(component => {
if (component.preFetch) {
return component.preFetch(store)
}
})).then(() => {
context.initialState = store.state
return app
})
}
和官方的 hackernews 例子没什么区别
server启动后,第一个请求没有问题,可以看到渲染后的页面,但是刷新发出第二个请求后时,服务端会报错:
TypeError: Cannot redefine property: $router
搜索了一下,说可能是由于多次 Vue.use(Router)
导致的,但我的代码里只在 router/index.js
里用了一次