Vue + Express (NestJS) Невозможная задача, вы используете сборку Vue только для выполнения, где - PullRequest
Новая
       21

Vue + Express (NestJS) Невозможная задача, вы используете сборку Vue только для выполнения, где

0 голосов
/ 21 декабря 2018

Это делает невозможным добавление 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>)

app.controller.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);
    });
  }
}

import {createApp} из './app';

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, поскольку в настоящее время я им не пользуюсь.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

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)
})
0 голосов
/ 21 декабря 2018

К счастью, проблема не так сложна.

Вы пытаетесь использовать runtime сборку на .ts файлах, чего вы не можете.Это потому, что только *.vue, потому что они предварительно скомпилированы.

Чтобы обойти это, просто создайте псевдоним для vue в веб-пакете: 

resolve: {
  alias: {
    vue: 'vue/dist/vue.js'
  }
}

, который даст вам доступ кшаблон-компилятор, позволяющий использовать Vue внутри не скомпилированных шаблонов (читай: любой файл, не заканчивающийся на .vue)

...