Question

当我尝试使用Vuejs 2.0设置服务器端渲染时，我的项目遇到了这个问题：

h is not a function

TypeError: h is not a function
  at VueComponent._default (__vue_ssr_bundle__:3158:17)

我的client-entry.js文件：

import { app } from './index'
app.$mount('#app')

我的server-entry.js文件：

import { app } from './index'
export default context => {
  router.push(context.url).
  return new Promise((resolve, reject) => {
    resolve(app);
  })
}

我的webpack服务器构建配置：

var webpackConfig = merge(baseWebpackConfig, {
  target: 'node',
  entry: './vue/server-entry.js',
  output: Object.assign({}, baseWebpackConfig.output, {
    path: 'dist/server',
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2'
  }),
  externals: Object.keys(require('../package.json').dependencies),
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"',
      'process.env.VUE_ENV': '"server"'
    })
  ]
})

我的server.js文件：

var layout = fs.readFileSync('./dist/index.html', 'utf8')
const code = fs.readFileSync('./dist/server/server-bundle.js', 'utf8')
const bundleRenderer = require('vue-server-renderer').createBundleRenderer(code)
var express = require('express')
var server = express()
server.get('*', (request, response) => {
  bundleRenderer.renderToString((error, html) => {
    if (error) {
      console.log(error)
      return response
        .status(500)
        .send(JSON.stringify(error))
    }
    response.send(layout.replace('<div id="app"></div>', html))
  })
})

PS：我的客户端构建工作正常。

Answer 1

h是渲染函数中通常赋予createElement参数的名称，在使用jsx时必须以这种方式命名

Vuejs 2.0服务器端渲染

1 个答案: