Quantcast
Channel: CNode:Node.js专业中文社区
Viewing all articles
Browse latest Browse all 14821

koa2 + vue2 SSR 报错: TypeError: Cannot redefine property: $router

$
0
0

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里用了一次


Viewing all articles
Browse latest Browse all 14821

Trending Articles