koa2 + vue2 SSR 报错: TypeError: Cannot redefine property: $router
发布于 7 年前 作者 wong2 10130 次浏览 来自 问答

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 回复

贴一下你的router/index.js代码

@leaves4j

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
    }
  ]
})

@i5ting 我比较了一下,除了我是把 stream transform 后赋值给 ctx.body 之外,没看出什么区别

啊我自己解决了~ Vue 被打包了两次

@wong2 能详细说一下,你是怎么解决的吗?我也出现了同样的问题。

回到顶部