鍍金池/ 問(wèn)答/HTML/ Vue ssr失敗,渲染的html為undefined

Vue ssr失敗,渲染的html為undefined

想試著寫(xiě)一個(gè)ssr demo,不帶路由,不帶數(shù)據(jù)預(yù)取的。官網(wǎng)文檔中的基本用法demo的照寫(xiě)了運(yùn)行沒(méi)問(wèn)題,但當(dāng)我想換成組件式開(kāi)發(fā)的時(shí)候就出問(wèn)題了,渲染出來(lái)的頁(yè)面是空的,這是我的代碼,麻煩幫忙看看

這是entry-client.js

import { createApp } from './app'

const { app } = createApp()

app.$mount('#app')

這是entry-server.js

import { createApp } from './app'
export default context => {
  const { app } = createApp()
  return app
}

這是app.js

import Vue from 'vue'
import App from '../../component/test/App.vue'

export function createApp () {
  const app = new Vue({
    render: h => h(App)
  })
  return { app }
}

這是server.js

const server = require('express')()
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer('./dist/vue-ssr-server-bundle.json', {
  runInNewContext: false, 
  template: require('fs').readFileSync('./views/test/test.html', 'utf-8')
})
server.get('*', (req, res) => {
  renderer.renderToString( (err, html) => {
    res.end(html)
  })
}).listen(8899)

這是webpack打包服務(wù)端的代碼

const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.common.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = merge(baseConfig, {
  entry: './js/test/entry-server.js',
  target: 'node',
  devtool: 'source-map',
  output: {
    libraryTarget: 'commonjs2'
  },
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: [
    new VueSSRServerPlugin()
  ]
})

我的運(yùn)行步驟是,先 webpack --config webpack.ssr.js,會(huì)成功打包出vue-ssr-server-bundle.json文件,之后node server.js,但是渲染失敗,頁(yè)面是空白的。

回答
編輯回答
莫小染

兄弟,解決了嗎?

2017年8月19日 06:22
編輯回答
舊時(shí)光

解決了,./dist/vue-ssr-server-bundle.json不能是相對(duì)路徑,必須絕對(duì)路徑

2017年2月4日 00:30