koa2 + vue2 SSR 报错： TypeError: Cannot redefine property: $router
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 里用了一次
6 回复
import Vue from 'vue'
import Router from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
linkActiveClass: 'active',
routes: [
{
path: '/',
component: HomeView
}
]
})
