时间戳

首页 > 解决方案 > Vue + Express(NestJS) 不可能完成的任务，您正在使用 Vue 的仅运行时构建，其中

express - Vue + Express(NestJS) 不可能完成的任务，您正在使用 Vue 的仅运行时构建，其中

问题描述

这让我无法将 Vue 作为视图系统添加到名为 Nest with Express 的框架中。

没想到适配 Vue 这么复杂。这就是我来这里的原因，以便您可以引导我走上正确的道路，而我不会直接使用 Vue。

拳头错误：

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)

应用程序控制器.ts

import { Controller, Get, Render, Response } from '@nestjs/common';
import { createRenderer } from 'vue-server-renderer';
import { createApp } from './app';
import HelloComponent from './components/Hello';
const context = {data: {}, view: '', componets: {} };

@Controller()
export class AppController {
  @Get()
  getHello(@Response() res): any {
    context.data = { message: 'Esto es un nuevo mensaje 2' };
    context.componets = { 'hello' : HelloComponent };
    const app = createApp(context);
    const renderer = createRenderer();
    renderer.renderToString(app, (err, html) => {
      res.end(html);
    });
  }
}

从'./app'导入{createApp}；

import Vue from 'vue';

export function createApp(context: any) {
  return new Vue({
    data: context.data,
    template: fs.readFileSync('./index.html', 'utf-8'),
    components: context.components,
  }).$mount('#app');
}

我尝试的是拥有一个基本模板，然后使用 NestJS 为每个控制器或路由添加组件。

我不知道这是否可行以及我是否被迫使用 Webpack，因为我目前没有使用它。

谢谢！

标签： expressvue.jsvuejs2nestjsserver-side-rendering

解决方案

Vue 启动了一个完整的站点来引导您完成服务器端渲染的启动和运行。这与https://vuejs.org中概述的过程不同。

完整信息可在以下位置找到：https ://ssr.vuejs.org/并在主指南中的侧边栏导航标题服务器端渲染https://vuejs.org/v2/guide/ssr.html

以下是帮助您入门的要点：

npm install express --save

npm install vue vue-server-renderer --save

与您的服务器示例集成

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>The visited URL is: {{ url }}</div>`
  })

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)

渲染一个 Vue 实例

// 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)
})

推荐阅读