如何在没有webpack的情况下将ssr添加到vue-cli 3项目中?

时间:2018-07-22 03:10:43

标签: webpack vuejs2

我使用以下项目创建了项目:

vue create my-project

但是当我的项目完成时。我找不到“如何在不使用webpack的情况下将项目更改为ssr”的答案。

有人有示例项目或教程吗?

1 个答案:

答案 0 :(得分:0)

使用NodeJS,您可以执行以下操作:

// Step 1: Create a Vue instance
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})

// Step 2: Create a renderer
const renderer = require('vue-server-renderer').createRenderer()

// Step 3: Render the Vue instance to HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})

// in 2.5.0+, returns a Promise if no callback is passed:
renderer.renderToString(app).then(html => {
  console.log(html)
}).catch(err => {
  console.error(err)
})

文档: https://ssr.vuejs.org/guide/#installation