Vue.js服务器端渲染生成的包未定义

时间:2018-07-25 14:52:23

标签: javascript webpack vue.js

我正在尝试在Vue应用程序中设置服务器端渲染。我已经导入了服务器端渲染器捆绑包,并且我相信它包含了使其正常工作所需的一切,但是,刷新网页时,我从Cannot read property 'renderToString' of undefined文件中收到了错误server.js

我尝试调试,但似乎我的捆绑包从未设置为任何东西,因此始终未定义。

dev-server.js

const webpack = require('webpack')
const clientConfig = require('./webpack.client.config')
const serverConfig = require('./webpack.server.config')
const MFS = require('memory-fs')
const path = require("path")

module.exports = function setupDevServer (app, onUpdate) {
  clientConfig.entry.app = [
    'webpack-hot-middleware/client',
    clientConfig.entry.app
  ]
  clientConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  )
  const clientCompiler = webpack(clientConfig)
  app.use(
    require('webpack-dev-middleware')(clientCompiler, {
      stats: {
        colors: true
      }
    })
  )
  app.use(require('webpack-hot-middleware')(clientCompiler))

  const serverCompiler = webpack(serverConfig)
  const mfs = new MFS()
  const outputPath = path.join(serverConfig.output.path, 'server/main.js')
  serverCompiler.outputFileSystem = mfs
  serverCompiler.watch({}, () => {
    onUpdate(mfs.readFileSync(outputPath, 'utf-8'))
  })
}

server.js

const express = require("express");
const app = express();
const fs = require("fs");
const path = require("path");
const { createBundleRenderer } = require('vue-server-renderer');
let renderer;

const indexHTML = (() => {
  return fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf-8");
})();

app.use("/dist", express.static(path.resolve(__dirname, "./dist")));

require("./build/dev-server")(app, bundle => {
  renderer = createBundleRenderer(bundle)
});

app.get("*", (req, res) => {
  renderer.renderToString({ url: req.url }, (err, html) => {
    if (err) {
      return res.status(500).send('Server Error')
    }
    html = indexHTML.replace('{{ APP }}', html)
    res.write(html);
    res.end();
  })
});

const port = process.eventNames.PORT || 3000;
app.listen(port, () => {
  console.log(`server started at http://localhost:${port}`);
});

0 个答案:

没有答案